Javascript 画布文本调整大小

我正在尝试以类似的方式调整画布中的文本大小：

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

---

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

我能想到的一种方法是在单独的隐藏画布上使用

toDataUrl

将字符串转换为图像。然后在主画布上绘制该图像，并操纵其

宽度

和

高度

---

我能想到的一种方法是在一个单独的隐藏画布上使用

toDataUrl

将字符串转换为图像。然后在主画布上绘制该图像，并操纵其

宽度

和

高度

---

参考此Url了解HTML5画布文本大小调整

参考此Url了解HTML5画布文本大小调整

我使用KineticJS setScale方法完成此操作。我从那里得到了灵感

---

看一看：

我是用KineticJS setScale方法完成的。我从那里得到了灵感

---

看看：

我刚刚意识到。。这为我省去了很多麻烦，因为我不再需要以不同的方式处理文本和图像了。我可以在W3C上的toDataUrl（）上找到任何东西。关于这方面的文档很少，我怀疑大多数浏览器是否完全支持它。你能给我指一些参考资料吗？@VladOtrocol我添加了一个演示，在这个演示中，你在文本区域键入的任何内容都会转换成图像，然后压缩成100x100像素的正方形。我刚刚意识到。。这为我省去了很多麻烦，因为我不再需要以不同的方式处理文本和图像了。我可以在W3C上的toDataUrl（）上找到任何东西。关于这方面的文档很少，我怀疑大多数浏览器是否完全支持它。你能给我指一些任何类型的参考吗？@VladOtrocol我添加了一个演示，在这个演示中，你在文本区域键入的任何内容都会转换成一个图像，然后压缩成一个100x100像素的正方形。有没有解决方案：？有没有解决方案：？@Nish。已经修好了。请查克now@Nish. 已经修好了。请马上通知我

    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);
}