createjs将DisplayObject转换为Shape

时间:2016-05-31 12:04:55

标签: javascript createjs

我开始使用CreateJS
是否可以将实例DisplayObject转换为Shape [Extends DisplayObject]以用于MovieClip上的绘画线?

实施例

var DrawSomething = createjs.DisplayObject.prototype.DrawSomething = function (){
    var line = createjs.Shape(this); // it's doesn't work.
    line.graphics.setStrokeStyle(3);
    var color = createjs.Graphics.getRGB(0xFFFFFF * Math.random(), 1);
    line.graphics.beginStroke(color);
    line.graphics.moveTo(0, 0);
    line.graphics.lineTo(300, 300);
    line.graphics.endStroke();
}

    canvas = document.getElementById("canvas");
    exportRoot = new lib.AS2ToAS3_Canvas();

    stage = new createjs.Stage(canvas);
    stage.addChild(exportRoot);
    stage.update();

    createjs.Ticker.setFPS(lib.properties.fps);
    createjs.Ticker.addEventListener("tick", stage);

    exportRoot.DrawSomething();

作为临时解决方案,我做了以下内容。但我不知道如何限制(切断)MovieClip的输出高度和宽度。并控制其深度。

var Shape;
var DrawSomething = createjs.DisplayObject.prototype.DrawSomething = function (){
    if(!Shape){ 
        Shape = new createjs.Shape();
        stage.addChild(Shape);
    }   
    var line = Shape; 
    line.graphics.setStrokeStyle(3);
    var color = createjs.Graphics.getRGB(0xFFFFFF * Math.random(), 1);
    line.graphics.beginStroke(color);
    var point = this.localToGlobal(0,0);
    line.graphics.moveTo(point.x,point.y);
    point = this.localToGlobal(300,300);
    line.graphics.lineTo(point.x,point.y);
    line.graphics.endStroke();
}

0 个答案:

没有答案