如何使用 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 来绘制您的内容。如果是这样，您只需确保“孔”以反向缠绕 绘制。这只是意味着需要以相反的方向绘制形状。

例如，Canvas2D rect 方法是顺时针绘制的，所以要从中减去，需要在另一个方向上绘制指令。

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 放大以使其更明显。

干杯，