亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

使用 EaselJS,如何在不重繪現有位圖元素的情況下設置繪畫的幀率?

使用 EaselJS,如何在不重繪現有位圖元素的情況下設置繪畫的幀率?

慕尼黑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/

http://img1.sycdn.imooc.com//6482f3190001c97103120212.jpg

通過簡單地將 bg 和文本放在一個容器中,然后緩存它,我可以控制哪些部分得到效果,而不影響舞臺的其余部分。請注意,這確實會導致您的內容重復繪制,但實際上沒有更好的方法可以使用一個畫布來完成它。https://jsfiddle.net/lannymcnie/yfqne2or/2

http://img1.sycdn.imooc.com//6482f32200014c7b03230183.jpg

查看完整回答
反對 回復 2023-06-09
  • 1 回答
  • 0 關注
  • 239 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號