画布文字调整大小

Question

我试图以与此类似的方式调整画布中的文字：http://simonsarris.com/project/canvasdemo/demo2.html

有没有办法分别更改字符串的宽度或高度？

到目前为止我所能做的就是更改字体大小，但使用句柄更难管理。

Answer 1

请参阅此网址，了解HTML5 Canvas文字大小调整http://jsfiddle.net/palani/Cxgkz/

Answer 2

我能想到的一种方法是在一个单独的隐藏画布上使用toDataUrl将字符串转换为图像。然后在主画布上绘制该图像并操纵其width和height。

Demo

Answer 3

我是使用KineticJS setScale-method完成的。我从那里得到了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