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

正如您在所附图像上看到的，它有菱形，内部有椭圆，几乎是透明的

但这只是一个图像

如何使用createjs创建此文件

问题的更详细描述：

你在照片上看到的并不完全是我所需要的。 理想情况下，我的任务是用这个菱形做两个三角形，里面有一个椭圆

椭圆应该在三角形中创建某种透明度，以便该三角形下的所有元素都可以通过透视图看到

我的实施：

我根据这个例子画了一个三角形： （多亏了这个）

（如果有一种更方便甚至正确的方法来做一个三角形，这将有助于解决我的问题，我很乐意接受你的解决方案）

接下来，我简单地在这个三角形的顶部覆盖用抽屉画的椭圆

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

---

任何帮助都将被接受

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

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

例如，Canvas2D方法是顺时针绘制的，因此要从中减去，需要在另一个方向绘制指令

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

drawerlipse

有一个逆时针的

参数，这个参数也起作用。这是一个，它实际上是以另一种方式绘制的（首先是小切口），但结果相同

更新

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

使用更新后的代码，我使用默认的顺时针缠绕添加了一个简单的
drawerlipse（）
调用，并切掉了一个圆：--注意，我从x10上方放大了坐标，使其更可见

干杯，
嗨。在文档中，我找不到逆时针方向的
参数。我在问题部分中添加了一些关于我的问题的附加信息。使用您的代码示例添加了一些详细信息。它正在工作，但是，我如何为这个椭圆设置regX、regY和其他道具？EaselJS中的椭圆有四个属性（看起来API不包括方向）“
regX/regY
基本上是形状的左上角。您不能在指令子集上放置单独的注册点，但可以偏移x/y进行补偿。不过，您可以做的另一件事是存储对ellipse命令的引用并只更新其道具。下面是一个示例：…如果您想旋转或倾斜它不过，您需要一个更复杂的解决方案。