DownloadText
-
Insert text on the canvas and modify text.
-
Change text color, weight, align so on.
>Implementing to insert text on the canvas using the text palette
- The user can make the specific text palette and edit some text using this palette.
- Call custom event API, it can insert text object and control the text palette.
* ImageEditor#activateText : It occurs when the canvas is clicked.
* ImageEditor#adjustObject : It occurs when any inserted text object is moved or resized.
imageEditor.on('activateText', function(obj) {
console.log(obj.type); // Whether the current text object is new or aleady created
console.log(obj.text); // Contents of the current text object
console.log(obj.styles); // Styles of the current text object
console.log(obj.originPosition); // Mouse position on the canvas
console.log(obj.clientPosition); // Mouse position on browser - set the text palette's position
});
imageEditor.on('adjustObject', function(obj) {
console.log(obj.type); // Whether the selected object's type is "text" or others - control the the text palette's view state
});

Icon
-
Insert the basic icon on the canvas. (type: _arrow_, _cancel_ icon)
-
Register the custom icon.
-
Change color of the icon.
>How to draw SVG path
- Link
>How to get SVG path value when registering the custom icon
- Link

Mask Filter
-
Load the image for using mask filter. (This image is called the "mask image")
-
When applying mask filter on the canvas image, the canvas image's areas matching the mask image's black areas should be transparent.

Line Drawing
-
Draw the straight line on the canvas.
-
Change the color and width value of brush to draw line.

Shourtcut
-
On the canvas
* `ctrl + z` : undo
* `ctrl + y` : redo
-
Crop
* `shift` : making the cropzone of 1:1 ratio

More
|