javascript - キャンバスのテキストのサイズ変更

Question

これと同様の方法でキャンバス内のテキストのサイズを変更しようとしています: http://simonsarris.com/project/canvasdemo/demo2.html

文字列の幅または高さを個別に変更する方法はありますか?

これまでのところ、フォント サイズを変更することしかできませんが、ハンドルで管理するのは難しいです。

Answer 1

HTML5 キャンバス テキストのサイズ変更については、この URL を参照してくださいhttp://jsfiddle.net/palani/Cxgkz/

Answer 2

私が考えることができる1つの方法はtoDataUrl、別の隠されたキャンバスを使用して文字列を画像に変換することです。次に、その画像をメインキャンバスに描画し、その画像とを操作しwidthますheight。

デモ

Answer 3

私はKineticJSsetScale-methodを使用してこれを行いました。私はそこからインスピレーションを得ました 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