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/

誰かが私に説明できますか..？そして、その動作を回避する方法を...

Thxをし

は（...私は形状インスタンスのcompositeOperationのPARAMを変更しようとしましたが、それは効果がないように見えるのです）！

EDIT 1：

私は私の作業例より正確な例を作ってきました。このJsFiddleを見て、キャンバス上でマウスを動かしてください。右から左には何の問題もないことがわかります...しかし、ネガティブスペースは左から右に現れます!! （よりよいビューのために素早く移動）

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

私はなぜ正確に理解していない、と私は任意の有効な回避策を見つけることができません... （理由は、パフォーマンス上の理由の可能性なしキャッシング、無composeOperation理由背景のトラブル）

出典

2016-08-10 Simon Guichard

EDIT 1（削除2つの以前に提案された回避策）の私は解決策を見つけたと思う

：サークルの前にもう一度塗りつぶしを設定すると、描かれているが対処するようですそれ。

この例では、上記の抜粋の最後の行をshape2.graphics.beginFill('blue').drawCircle(280,250,100);に変更することを意味します。

EDITあなたの発言や更新jsfiddleに応じて2

、また、あなたのShape()インスタンス化した後shape3.compositeOperation = "xor";権を設定してみてください。私ははるかに複雑https://jsfiddle.net/93gv1e06/

出典

2016-08-10 11:20:37 gandreadis

Thxを、私の仕事の場合：

はフィドルを更新しました。私はlineTo（）を使用する必要があり、どちら側が描画されるのかわからないので、私は両方の側で動作するソリューションが必要です！ –

はい、あなたは正しいです、私は前にこのソリューションをテストしています:)しかし、私は別の制約があります！私は形状にアルファを設定する必要があります...その解決策では、rectと円はもはや同じアルファ値を持っていません...かなり複雑な状況ですね;） –

ああ、あなたの問題を参照してください、それはかなり複雑な状況です確かに:) – gandreadis

html5 - キャンバス - Createjs - グラフィックス描画の負のスペース

答えて

関連する問題