Using domElement input text and resizing canvas

Question

I'm using a script to "convert" a createjs.Text object to a domElement with textinput. This works ok, but when I'm resizing the canvas, the domElement (htmlelement) won't resize along with it. It won't move to the correct position.

I have a jsfiddle here (press button) to show what I'm trying to do: jsFiddle I'm overwriting a Text object with a domElement, but because I'm also resizing the canvas it will not stay at the same place.

<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>

Hope someone can help me with this.

Answer 1

I end up building my own version of DomElement with this customized function (createjs 0.8):

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;
    }

};