domElement 입력 텍스트 사용 및 캔버스 크기 조절

Question

스크립트를 사용하여 createjs.Text 객체를 textinput이있는 domElement로 "변환"합니다. 이 괜찮아요,하지만 canvas 크기를 조정할 때 domElement (htmlelement) 함께 조정되지 않습니다. 올바른 위치로 이동하지 않습니다.

나는 여기 jsfiddle (보도 버튼) 내가 뭘하려는거야 보여주고 있습니다 jsFiddle 을 나는 domElement와 텍스트 개체를 덮어 해요,하지만 난 또한 캔버스의 크기를 조정하고있어 있기 때문에 숙박하지 않습니다 같은 장소.

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

희망의 사람이 나를 도울 수있다. 나는이 사용자 정의 기능을 DomElement 내 자신의 버전을 구축 결국

Answer 1

는 (0.8 createjs) :

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

};