html5 - Canvas - Createjs - 图形绘制中的负空间

Question

我有一个复杂的情况，我需要使用 lineTo() 和 drawCircle() 方法绘制一个形状，但是根据我绘制线条的方向会产生负空间行为。

//draw from right to left   
var shape2 = new createjs.Shape();
    shape2.graphics.beginFill('blue').moveTo(300,200).lineTo(0,200).lineTo(0,300).lineTo(300,300).closePath();
    shape2.graphics.drawCircle(280,250,100)

看看这个 JsFiddle :) https://jsfiddle.net/zOgs/3epv7o54/

有人可以向我解释为什么蓝色圆圈会产生负空间..吗？以及如何避免这种行为...

（我试图改变形状实例的compositeOperation参数，但它似乎没有效果......）

谢谢！

编辑 1：

我为我的工作案例做了一个更准确的例子。请查看这个 JsFiddle 并在画布上移动鼠标。你会看到从右到左没有任何问题......但是从左到右出现负空格！ （快速移动以获得更好的视野）

https://jsfiddle.net/zOgs/psa3x9y2/

我不明白为什么，我找不到任何有效的解决方法... （由于性能原因无法进行缓存，由于后台问题无法进行 composeOperation）

Answer 1

EDIT 1（删除之前提出的两个解决方法）

我想我找到了解决方案：在绘制圆圈之前再次设置填充似乎可以解决这个问题。

就您的示例而言，这意味着将上面摘录的最后一行修改为shape2.graphics.beginFill('blue').drawCircle(280,250,100);。

编辑 2

针对您的评论和更新的 jsfiddle，您还可以尝试在您的 Shape() 实例化之后立即设置 shape3.compositeOperation = "xor";。

更新小提琴：https://jsfiddle.net/93gv1e06/