Question

我有一个带背景图片的画布，现在我需要在画布上绘制虚拟区域以选择图像的某些部分。

目前我正在使用fabricjs绘制简单的形状，如矩形，画布上的圆圈。但是不知道如何绘制复杂的形状。

有人可以帮忙吗？

 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();
        }

Answer 1

如果你想做出心形你可以使用这些代码

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();
      }

画布上复杂的形状选择

1 个答案: