慕尼黑8549860
2023-06-09 17:37:36
我是 EaselJS 的新手,我有一個帶位圖的舞臺,我需要添加繪畫功能,以便可以在位圖之上繪制形狀。paint 函數需要stage.autoClear = false來創建形狀。此代碼強制重繪舞臺上的所有元素(包括位圖)。但不應重繪舞臺上現有的位圖。位圖位于container中,它是stage的子級。這就是我所擁有的(大部分來自https://github.com/CreateJS/EaselJS/blob/master/examples/CurveTo.html): function init() { canvas = document.getElementById("theCanvas"); stage = new createjs.Stage(canvas); createjs.Touch.enable(stage); stage.enableMouseOver(10); stage.mouseMoveOutside = true; stage.addChild(container); }; function initPaint() { var oldPt; var oldMidPt; var color; var stroke; stage.autoClear = false; stage.enableDOMEvents(true); createjs.Ticker.framerate = 24; stage.addEventListener("stagemousedown", handleMouseDown); stage.addEventListener("stagemouseup", handleMouseUp); stage.addChild(drawingCanvas); stage.update(); }; function handleMouseDown(event) { if(!event.primary) {return; } stage.autoClear = false; color = "#000000"; stroke = 20; oldPt = new createjs.Point(stage.mouseX, stage.mouseY); oldMidPt = oldPt.clone(); stage.addEventListener("stagemousemove", handleMouseMove); } function handleMouseMove(event) { if (!event.primary) { return; } var midPt = new createjs.Point(oldPt.x + stage.mouseX >> 1, oldPt.y + stage.mouseY >> 1); drawingCanvas.graphics.clear().setStrokeStyle(stroke, 'round', 'round').beginStroke(color).moveTo(midPt.x, midPt.y).curveTo(oldPt.x, oldPt.y, oldMidPt.x, oldMidPt.y); oldPt.x = stage.mouseX; oldPt.y = stage.mouseY; oldMidPt.x = midPt.x; oldMidPt.y = midPt.y; stage.update(); } 位圖元素已添加到舞臺中。當使用stage.autoclear = false調用initPaint時,位圖會重新繪制,一個在另一個之上(這是顯而易見的,因為我在位圖上有陰影效果并且陰影不斷變暗)。如何阻止重繪位圖元素?
1 回答

qq_遁去的一_1
TA貢獻1725條經驗 獲得超8個贊
您不能有條件地選擇重新繪制到舞臺上的內容。
您擁有的最佳選擇是擁有一個單獨的畫布/緩存,您可以連續繪制到該畫布/緩存,然后將其添加為主舞臺上的位圖源。緩存基本上為你做了這個。
一種簡單的方法是將您的自動繪制內容放入容器中,并且cache()它:
var c = new createjs.Container();
c.addChild(bg, txt); // Add your content
c.cache(0,0,400,800);
然后你不需要在你的舞臺上使用 autoClear,其他一切都會正常繪制。您只需要在內容更改時更新緩存即可。使用source-overas 繪制模式會將當前內容添加到緩存中,而不是先清除它。
c.updateCache("source-over");
例如,這是一個小提琴,我在其中為透明框上的一些文本設置動畫。加法效果看起來很棒,但它也使圓形做同樣的事情:https ://jsfiddle.net/lannymcnie/yfqne2or/
通過簡單地將 bg 和文本放在一個容器中,然后緩存它,我可以控制哪些部分得到效果,而不影響舞臺的其余部分。請注意,這確實會導致您的內容重復繪制,但實際上沒有更好的方法可以使用一個畫布來完成它。https://jsfiddle.net/lannymcnie/yfqne2or/2
添加回答
舉報
0/150
提交
取消