javascript - Canvas Text Resize - Stack Overflow

admin管理员组

文章数量:1410712

I am trying to resize text in canvas in a similar way to this : .html

Is there a way to change a string's width or height separately?

All I can do so far is change the font size but that is harder to manage with handles.

I am trying to resize text in canvas in a similar way to this : http://simonsarris./project/canvasdemo/demo2.html

Is there a way to change a string's width or height separately?

All I can do so far is change the font size but that is harder to manage with handles.

• javascript
• css
• html
• resize
• html5-canvas

Share Improve this question Follow edited Aug 22, 2012 at 16:11 Some Guy 16.2k1010 gold badges6060 silver badges6868 bronze badges asked Aug 4, 2012 at 13:01 Vlad OtrocolVlad Otrocol 3,19077 gold badges3535 silver badges5656 bronze badges 1

• Any solutions for : stackoverflow./questions/11957042/… ? – Random78952 Commented Aug 14, 2012 at 18:26

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

Refer This Url for HTML5 Canvas Text Resize http://jsfiddle/palani/Cxgkz/

One method I can think of is to turn the strings to images using toDataUrl on a separate, hidden canvas. Then draw that image on your main canvas and manipulate its width and height.

Demo

I did this using KineticJS setScale-method. I got insipartion from there http://www.html5canvastutorials./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);
} 

Take a look: http://kineticjs./docs/symbols/Kinetic.Node.php#setScale

本文标签： javascriptCanvas Text ResizeStack Overflow