使用domElement輸入文本和調整畫布大小

我正在使用腳本將createjs.Text對象「轉換」爲具有textinput的DOM元素。這工作正常，但是當我調整畫布大小時，domElement（htmlelement）不會隨着它調整大小。它不會移動到正確的位置。使用domElement輸入文本和調整畫布大小

我這裏有一個的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>

希望有人能幫助我與此有關。

來源

2014-12-21 Ferry Kranenburg

我結束了建設自己的一個DOMElement的版本與此自定義函數（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; 
    } 

};

來源

2014-12-22 20:15:18

使用domElement輸入文本和調整畫布大小

回答

相關問題