Created
June 19, 2023 10:33
-
-
Save vasiliishvakin/52f31e0eeb3beabe65a526854ab6e9bc to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const canvas = new fabric.Canvas('canvas'); | |
| const text = new fabric.Text("Curved text", { left: 50, top: 50 }); | |
| canvas.add(text); | |
| let curveAngle = 90; | |
| const lineLength = text.width; | |
| // Calculate the radius based on the curve angle and line length | |
| const curveRadius = (lineLength * lineLength) / (8 * Math.abs(Math.sin(curveAngle * Math.PI / 180 / 2))); | |
| const controlPointX = lineLength / 2; | |
| const controlPointY = -curveRadius; | |
| const pathString = `M 0 0 Q ${controlPointX} ${controlPointY} ${lineLength} 0`; | |
| const line = new fabric.Path(pathString, { | |
| fill: '', | |
| stroke: 'black', | |
| objectCaching: false | |
| }); | |
| line.left = text.left; | |
| line.top = text.top - line.height / 2; | |
| canvas.add(line); | |
| text.path = line; | |
| text.setPathInfo(); | |
| document.getElementById('updateBtn').addEventListener('click', function() { | |
| const newAngle = parseInt(document.getElementById('angleInput').value); | |
| if (!isNaN(newAngle)) { | |
| curveAngle = newAngle; | |
| const newRadius = (lineLength * lineLength) / (8 * Math.abs(Math.sin(curveAngle * Math.PI / 180 / 2))); | |
| const newPathString = `M 0 0 Q ${controlPointX} ${-newRadius} ${lineLength} 0`; | |
| line.set({ path: newPathString }); | |
| text.setPathInfo(); | |
| canvas.renderAll(); | |
| } | |
| }); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment