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

我有一个复杂的情况，我需要用lineTo（）和drawCircle（）方法绘制一个形状，但根据我绘制的方向有一个负空间行为线。html5 - 画布 - Createjs - 图形绘制中的负空间

//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 PARAM，但它似乎没有任何效果...）

THX！

编辑1：

我已经作出了工作情况下更准确的例子。请看看这个JsFiddle并在画布上移动鼠标。你会看到从左到右没有任何问题...但负面空间显示从左到右！（快速移动为更好的视野）

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

我不明白究竟为什么，我找不到任何有效的解决办法... （无缓冲可能的，因为性能的原因，没有composeOperation因为背景烦恼）

来源

2016-08-10 Simon Guichard

EDIT 1（去除两个先前提出的解决方法）

我想我已经找到了解决办法：前圈再设置填充绘制似乎解决它。

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

EDIT 2

在回答您的意见和更新的jsfiddle，你也可以尝试你Shape()实例化后立即设置shape3.compositeOperation = "xor";。

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

来源

2016-08-10 11:20:37 gandreadis

THX，但我的工作来说，我要复杂得多。我需要使用lineTo（），我不知道我将绘制哪一面，所以我需要一个适用于两侧的解决方案！ –

是的你是对的，我已经测试过这个解决方案:)但我有另一个约束！我必须为形状设置一个alpha ...使用该解决方案，矩形和圆形将不会有相同的alpha值...相当复杂的情况呵呵） –

啊，是的，我看到你的问题，这是一个相当复杂的情况确实:) – gandreadis

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

回答

相关问题