Question

我使用脚本＆＃34;转换＆＃34;具有textinput的domElement的createjs.Text对象。这很好用，但是当我调整画布大小时，domElement（htmlelement）不会随之调整大小。它不会移动到正确的位置。

我在这里有一个jsfiddle（按下按钮）来显示我想要做的事情：jsFiddle 我用domElement覆盖了一个Text对象，但是因为我也在调整画布的大小，所以它不会停留在同一个地方。

<script src="https://code.createjs.com/createjs-2013.12.12.min.js"></script>
<script>
    var stage,container,inputElement,text;
    function init() {
        stage = new createjs.Stage("demoCanvas");           
        createjs.Ticker.on("tick", tick);

        container = new createjs.Container();
    container.x = 100;
    container.y = 100;
        stage.addChild(container);

        text = new createjs.Text("testText", "35px Arial", "#0065A3");
        text.name = "mytext";
        text.textAlign = "left";
        text.lineHeight = 37;
        text.lineWidth = 372;
        text.setTransform(153.2,78.7,1.027,1);

        container.addChild(text);

    }

    function convertToDomElement(){
        $("#demoCanvas").css({width:"700px"});

        var object = container.getChildByName("mytext");

        // create new domElement
       var  newInput = $("<input>", {type: "text", val: object.text});
        $(newInput).css({"width": object.lineWidth +"px","font": object.font,"color":object.color,"position":"absolute","top":"0","left":"0","z-index":99,"border":"1px solid black","display":"block","visibility":"hidden","outline":"none","background-color":"red", "border":"0"})
     $(newInput).appendTo($("#wrapper"));            
         // create new domElement wrapper
        inputElement = new createjs.DOMElement(newInput[0]);
        inputElement.name = object.name+"input";

         // set htmlelement value
        inputElement.htmlElement.value = object.text

    inputElement.setTransform(object.x, object.y, object.scaleX, object.scaleY, object.rotation, object.skewX, object.skewY, object.regX, object.regY);
        container.addChild(inputElement);

    }

    function tick(event) {

        stage.update(event);
    }

</script>

希望有人能帮助我。

Answer 1

我最终使用这个自定义函数（createjs 0.8）构建我自己的DomElement版本：

p._handleDrawEnd = function(evt) {
    var o = this.htmlElement;
    if (!o) { return; }
    var style = o.style;

    var props = this.getConcatenatedDisplayProps(this._props), mtx = props.matrix;

    var visibility = props.visible ? "visible" : "hidden";
    if (visibility != style.visibility) { style.visibility = visibility; }
    if (!props.visible) { return; }



    // Change position of domElement
    var stage = this.getStage();        
    var ratio = $(canvas).width() / 1100; 
    mtx.scale(ratio,ratio);
    mtx.tx = mtx.tx*ratio;
    mtx.ty = mtx.ty*ratio;
    // End change position of domElement


    var oldProps = this._oldProps, oldMtx = oldProps&&oldProps.matrix;
    var n = 10000; // precision

    if (!oldMtx || !oldMtx.equals(mtx)) {
        var str = "matrix(" + (mtx.a*n|0)/n +","+ (mtx.b*n|0)/n +","+ (mtx.c*n|0)/n +","+ (mtx.d*n|0)/n +","+ (mtx.tx+0.5|0);
        style.transform = style.WebkitTransform = style.OTransform = style.msTransform = str +","+ (mtx.ty+0.5|0) +")";
        style.MozTransform = str +"px,"+ (mtx.ty+0.5|0) +"px)";
        if (!oldProps) { oldProps = this._oldProps = new createjs.DisplayProps(true, NaN); }
        oldProps.matrix.copy(mtx);
    }

    if (oldProps.alpha != props.alpha) {
        style.opacity = ""+(props.alpha*n|0)/n;
        oldProps.alpha = props.alpha;
    }

};

使用domElement输入文本和调整画布大小

1 个答案: