画布上的复杂形状选择答案

【问题标题】：complex shape selection on canvas画布上的复杂形状选择
【发布时间】：2018-01-04 05:05:55
【问题描述】：

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

目前我正在使用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();
        }

【问题讨论】：

你的问题不是很清楚，对不起，背景图片上传了吗？你可以使用路径（fabricjs.com/docs/fabric.Path.html）；万事如意
是的背景图片已上传并可见，我需要从该图片中选择一些特定区域，基本上我需要创建路径并动态指向它，就像这篇文章中建议的那样 [(stackoverflow.com/questions/29011717/… . 但问题是在我的情况下路径在画布上永远不可见。
对不起，我之前没有说清楚，请参考代码清楚。
我不知道它如何与fabric.js 一起工作，但在香草画布中，您可以使用renderingContext2d#isPointInPath() 检查坐标是否在当前路径内。 “当前”意味着它必须是画布上绘制的最后一条路径。因此，如果您正在使用状态堆栈，或者绘制一条又一条的路径，则需要在正确的时间调用 isPointInPath()。

标签： html5-canvas fabricjs

【解决方案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();
      }

【讨论】：