如何使用 CreateJs 在多边形中打洞？

Question

正如您在附图中看到的那样，它有一个菱形，里面的椭圆几乎是透明的。

但这只是一张图片。

如何使用 createjs 创建它？

更详细的问题描述：

您在图片中看到的不是我需要的。理想情况下，我的任务是用这个菱形制作两个三角形，里面有一个椭圆。

椭圆应该在三角形中产生某种透明度，这样三角形下面的所有元素都可以透过。

我的实现：

我按照这个例子做了一个三角形：（多亏了这个fiddle）

(createjs.Graphics.Polygon = function(x, y, points) {
    this.x = x;
    this.y = y;
    this.points = points;
}).prototype.exec = function(ctx) {
    // Start at the end to simplify loop
    var end = this.points[this.points.length - 1];
    ctx.moveTo(end.x, end.y);
    this.points.forEach(function(point) {
        ctx.lineTo(point.x, point.y);
    });
};
createjs.Graphics.prototype.drawPolygon = function(x, y, args) {
    var points = [];
    if (Array.isArray(args)) {
        args.forEach(function(point) {
            point = Array.isArray(point) ? {x:point[0], y:point[1]} : point;
            points.push(point);
        });
    } else {
        args = Array.prototype.slice.call(arguments).slice(2);
        var px = null;
        args.forEach(function(val) {
            if (px === null) {
                px = val;
            } else {
                points.push({x: px, y: val});
                px = null;
            }
        });
    }
    return this.append(new createjs.Graphics.Polygon(x, y, points));
};


stage = new createjs.Stage("demoCanvas");
poly1 = new createjs.Shape();
poly1.graphics.beginFill("Red").drawPolygon(0,0,10,10,10,40,40,30,60,5,30,0);
poly1.x = 10;
poly1.y = 10;
stage.addChild(poly1);
stage.update();

（如果有更方便甚至更正确的三角形制作方法，对解决我的问题有帮助，我会很乐意接受你的解决方案）

接下来，我简单地将用 drawEllipse 绘制的椭圆叠加在这个三角形上。

我知道我可能做错了什么，这就是我来这里的原因。

我们会接受任何帮助！

Answer 1

我假设您正在使用图形 API 来绘制您的内容。如果是这样，您只需要确保“孔”以反向缠绕绘制。这只是意味着形状需要在相反的方向绘制。

比如Canvas2Drect方法是顺时针绘制的，所以要减去它们，指令需要反方向绘制

var s = new createjs.Shape();
s.graphics.beginFill("red")
    .drawRect(0,0,300,300) // Draw a square

    // Then draw a smaller square
    .moveTo(100,100) // Top left
    .lineTo(100,200) // Bottom left
    .lineTo(200,200) // Bottom right
    .lineTo(200,100) // Top right
    .lineTo(100,100) // Top left
    .closePath();    // Optional if you are done

drawEllipse 有一个 anticlockwise 参数，它也可以解决这个问题。这是一个 jsfiddle sample，它实际上以另一种方式绘制它（首先是小切口），但结果相同。

更新

为了使形状“切出”另一个，它必须是同一图形实例的一部分，并且是同一路径指令的一部分。如果您 closePath() 在任何绘图指令之后，任何新的指令都将在其之上绘制而不会被删除。使用单独的形状实例会自动执行此操作。

使用更新后的代码，我添加了一个简单的 drawEllipse() 调用，使用默认的顺时针绕线，它切出了圆圈：https://jsfiddle.net/lannymcnie/yd25h8se/ -- 请注意，我将坐标从 x10 以上放大到让它更显眼。

干杯，

如何使用 CreateJs 在多边形中打洞？

How to make a hole in a polygon with CreateJs?

javascript

canvas

createjs