帆布字體大小

Question

我試圖調整在畫布上的文字以類似的方式，以這樣的：http://simonsarris.com/project/canvasdemo/demo2.html

有沒有辦法單獨改變字符串的寬度或高度？

到目前爲止，我所能做的只是更改字體大小，但難以用句柄來管理。

Answer 1

請參閱下列網址，HTML5畫布字體大小http://jsfiddle.net/palani/Cxgkz/

Answer 2

我能想到的一種方法是在單獨的隱藏畫布上使用toDataUrl將字符串變爲圖像。然後在主畫布上繪製該圖像並操縱其width和height。

Demo

Answer 3

我這樣做是使用KineticJS setScale法。我insipartion從那裏 http://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/

function addText(color, text, font, fontsize) { 

     var layerid = 'layer-text-something'; 

     var layer = new Kinetic.Layer({ 
      id:layerid 
      , 
      offset: [0, 0] 
     }); 
     var group = new Kinetic.Group({ 
      x: 50, 
      y: 50, 
      draggable: true 
      ,dragOnTop: false 
      , 
      offset: [50, 50] 
     }); 
     layer.add(group); 
     stage.add(layer); 

     var mtext = new Kinetic.Text({ 
      x: 0, 
      y: 0, 
      text: text, 
      fontSize: fontsize, 
      fontFamily: font, 
      fill: color, 
      draggable: false, 
      id: 'text-'+layernum, 
      name: 'text' 

     }); 

     mtext.on('mouseover', function() { 
      document.body.style.cursor = 'pointer'; 
     }); 

     mtext.on('mouseout', function() { 
      document.body.style.cursor = 'default'; 
     }); 
     group.add(mtext); 

     var width = mtext.getWidth(); 
     var height = mtext.getHeight(); 

     addAnchor(group, 0, 0, 'topLeft'); 
     addAnchor(group, width, 0, 'topRight'); 
     addAnchor(group, width, height, 'bottomRight'); 
     addAnchor(group, 0, height, 'bottomLeft'); 

     stage.draw(); 

     return layer; 
    } 


function update(activeAnchor) { 
    var group = activeAnchor.getParent(); 

    var topLeft = group.get('.topLeft')[0]; 
    var topRight = group.get('.topRight')[0]; 
    var bottomRight = group.get('.bottomRight')[0]; 
    var bottomLeft = group.get('.bottomLeft')[0]; 

    var text = group.get('.text')[0]; 

    var anchorX = activeAnchor.getX(); 
    var anchorY = activeAnchor.getY(); 

    // update anchor positions 
    switch (activeAnchor.getName()) { 
     case 'topLeft': 
      topRight.setY(anchorY); 
      bottomLeft.setX(anchorX); 
      break; 
     case 'topRight': 
      topLeft.setY(anchorY); 
      bottomRight.setX(anchorX); 
      break; 
     case 'bottomRight': 
      bottomLeft.setY(anchorY); 
      topRight.setX(anchorX); 
      break; 
     case 'bottomLeft': 
      bottomRight.setY(anchorY); 
      topLeft.setX(anchorX); 
      break; 
    } 

    if (text) { 
     text.setPosition(topLeft.getPosition()); 

     var newWidth = topRight.getX() - topLeft.getX(); 
     var newHeight = bottomLeft.getY() - topLeft.getY(); 
     if(newWidth && newHeight) { 
      currentSize = text.getSize(); 
      text.setScale(newWidth/currentSize.width, newHeight/currentSize.height); 
     } 
    } 
} 


function addAnchor(group, x, y, name) { 
    var layer = group.getLayer(); 

    var anchor = new Kinetic.Circle({ 
     x: x, 
     y: y, 
     stroke: '#666', 
     fill: '#ddd', 
     strokeWidth: 2, 
     radius: 3, 
     name: name, 
     draggable: true, 
     dragOnTop: false 
    }); 

    anchor.on('dragmove', function() { 
     update(this); 
     layer.draw(); 
    }); 
    anchor.on('mousedown touchstart', function() { 
     group.setDraggable(false); 
     this.moveToTop(); 
    }); 
    anchor.on('dragend', function() { 
     group.setDraggable(true); 
     layer.draw(); 
    }); 
    // add hover styling 
    anchor.on('mouseover', function() { 
     var layer = this.getLayer(); 
     document.body.style.cursor = 'pointer'; 
     this.setStrokeWidth(4); 
     layer.draw(); 
    }); 
    anchor.on('mouseout', function() { 
     var layer = this.getLayer(); 
     document.body.style.cursor = 'default'; 
     this.setStrokeWidth(2); 
     layer.draw(); 
    }); 

    group.add(anchor); 
} 

請看：http://kineticjs.com/docs/symbols/Kinetic.Node.php#setScale