如何使用create js将HTML DOM元素添加到画布上？

Question

以下代码无法在画布上添加DOM元素。

        var stage = new createjs.Stage('mycanvas');
        var html = document.createElement('div');
        html.id = 'ab';
        html.style.height = '50px';
        html.style.width = '100px';
        html.style.backgroundColor = '#000000';
        $('body').append(html);
        var gg = new createjs.DOMElement(html);
        gg.x = 0;
        gg.y = 0;
        stage.addChild(gg);
        stage.update();

- asb14690

Answer 1

您需要将位置设置为“absolute”，然后设置顶部和左侧属性。DOMElement仅设置对象的变换。

这是一个快速示例，使用Tween来缓动形状。 http://jsfiddle.net/TeVZ6/

var stage = new createjs.Stage("canvas");

var html = document.createElement('div');
html.id = 'ab';
html.style.height = '50px';
html.style.width = '100px';
html.style.backgroundColor = '#000000';
html.style.position = "absolute";
html.style.top = 0;
html.style.left = 0;

document.body.appendChild(html);

var gg = new createjs.DOMElement(html);
gg.x = 20;
gg.y = 20;
stage.addChild(gg);
stage.update();

createjs.Tween.get(gg).to({x:400}, 1000);
createjs.Ticker.addEventListener("tick", stage);

- Lanny