v1.1.0 Features Reference

Updated features reference

version: 1.1.0

Text

• 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

• Get started (Tutorial) : https://github.com/nhn/tui.component.image-editor/wiki/Tutorial
• API : http://nhn.github.io/tui.component.image-editor/latest/
• Sample : http://nhn.github.io/tui.component.image-editor/latest/tutorial-basic.html