complex shape selection on canvas

问题

I have a canvas with background image, now I need to draw virtual regions on that canvas for selecting some parts of the image.

Currently I am using fabricjs to draw simple shapes like rectangle, circle on canvas. But don't know how to draw complex shapes.

Can anyone help please?

 function createPath(event) {

            var pointers = canvas.getPointer(event.originalEvent);

            if (firstClick) {
                var pointsArray = ["M", pointers.x, pointers.y];
                initializePath(pointsArray);
                firstClick = false;
            }
            else {
                var pointsArray = ["L", pointers.x, pointers.y];
                addPath(pointsArray);
            }
        }
        function initializePath(pointsArray) {
            var path = new fabric.Path('M 0 0');

            path.path[0] = pointsArray;
            path.set({
                fill: 'red', stroke: 'green', opacity: 0.3,
                Type: ObjectType.Region,
                shape: builderConstants.HeatMapShapeType.Polygon
            });
            canvas.add(path);
        }
        function addPath(pointsArray) {
            var latestAddedPath = canvas.getObjects()[Object.keys(canvas.getObjects()).length - 1];
            latestAddedPath.path.push(pointsArray);
            latestAddedPath.path.push(["z"]);
            canvas.renderAll();
        }

回答1:

if you want to make heart shape you can use these code

function heartshape()
      {

var path = new fabric.Path('M 272.70141,238.71731 \
    C 206.46141,238.71731 152.70146,292.4773 152.70146,358.71731  \
    C 152.70146,493.47282 288.63461,528.80461 381.26391,662.02535 \
    C 468.83815,529.62199 609.82641,489.17075 609.82641,358.71731 \
    C 609.82641,292.47731 556.06651,238.7173 489.82641,238.71731  \
    C 441.77851,238.71731 400.42481,267.08774 381.26391,307.90481 \
    C 362.10311,267.08773 320.74941,238.7173 272.70141,238.71731  \
    z ');    
var scale = 100 / path.width;
path.set({ left: 20, top: 0, scaleX: scale, scaleY: scale,  fill: 'red', });
canvas.add(path);
canvas.renderAll();
      }

来源：https://stackoverflow.com/questions/45368225/complex-shape-selection-on-canvas

标签

html5-canvas

fabricjs