Implementing the graphical editor with Fabricjs

I. References to FABRICJS

1. Can be introduced directly through script

2. Install via NPM

1) npm Install Fabricjs

2) Importing import {fabric} from ' fabric ' where it is needed

　　

You can then use fabric to edit the canvas canvas graphically

Second, the use of FABRICJS

1. Drag the layer from the outside into the canvas

Set the element to drag and drop, set the Draggable property to True

　

. Datatransfer.setdata () is the data type and value that is used to set the drag data, the first parameter is generally text, the second parameter is the ID of the object being dragged, or it can not be set

. Bind the OnDragOver event (where the specified element is to be placed) and OnDrop (element placement)

Note: The OnDragOver event is required, otherwise it will not be able to identify the location of the placement, detailed to understand the novice tutorial on the commentary http://www.runoob.com/html/html5-draganddrop.html

The above code in the binding drag event when the If judgment is to limit the drag-and-drop container, so that the left and right side of the drag between the non-impact

In the event where drop needs to be placed, call Fabricjs's add image method, left and top where you want the dragged element to be placed on the canvas.

Once added, the graphic can be translated, scaled, rotated and other basic operations

3. Copy, paste, cut, Undo, redo

For reference https://www.cnblogs.com/lfqcode/p/8601605.html, the principle of shearing is similar to copying, except that the object is removed from the canvas when cut.

Undo Redo can refer to https://jsfiddle.net/abhi47/rwdpf3nL/29/

4. Change layer hierarchies by dragging

1) first through the data two-way binding of the Vue link between the left and right three parts, drag the graphic from the left to the canvas, the right data column corresponding changes in the right to drag changes layer level, the right data column changes the order of the same time the canvas layer level also changes

You can encapsulate a method to update the information on the right data column.

The right side of the drag and drop the same as the left side, but to limit the dragged after the container to be placed, otherwise the right can be dragged onto the canvas, so when the binding drag event will be judged when the case

2) Handle the first and the left side of the drag event, set the element to be draggable, and then drag the layer to a blank area to place

There are a few issues to consider at this point (because the index is used when the data column is updated or the hierarchical relationship of the canvas layer is updated):

First, the index of the dragged target object needs to be recorded

Second, you need to record where the final position is placed

Third, the data column order changes when the placement position is determined, and the layer level of the canvas changes as well

Now follow the above questions to resolve the issue step-by-step:

First, bind a custom attribute to each data on the right Data-orig, which is the index of the array, which is used by the Index property to record the original state of the data, because it is shown in reverse order when the page is displayed.

(The data update of the array is updated on the left to drag the graphic to the canvas.)

Second, because you want to implement an element to drag an empty area for it to be placed, you can add a P tag to each record, and then set opacity to 0

Bind a custom property at the same time, the value is also the index of the array, then how to get it, continue to see

In the above code, EVT is the information of the dragged target object, and then through Toelemen.getattribute can get to a property value, Objsarr array is the canvas canvas of all layer records

To get to the next step is to record the currently dragged target object, and then splice it from the array, and why it is an array of action record canvas layers,

After it is removed, the target object is inserted into the location specified by the array and then called

That.canvas2.renderAll (); This is why the data of the canvas is to be manipulated when it is removed and inserted, because the code that is called after the operation is completed automatically redraws the canvas and finally calls the previously encapsulated method That.layer_edit_evt (); The data column on the right is also updated, as

The above is about the FABRICJS part of the graphics operation, there may be some place said is not very good, please forgive me.

fabricjs:http://fabricjs.com/

　　

Implementing the graphical editor with Fabricjs