kineticjs 用户输入以更改文本大小

Question

我已经完成了 90% 的工作，通过用户图像上传和文本样式（颜色、重量、字体样式等）为杯子设计师制作画布，但我无法解决我的代码中的错误.

现在我正在使用 kinetic.js 来制作它，并有一个带有 keyup 的文本字段，并希望将其链接到用户输入以调整文本大小，我使用过画布，但对动力学很陌生，所以这是一种简单的实现方法这会很有帮助。

HTML：

<input type="text" id="textBox" placeholder="Your Text">
<br>Text Size:
<input type="range" id="textSize" min="4" max="100" step="1" value="30" />

js:

var text = new Kinetic.Text({
    x: 20,
    y: 30,
    text: '',
    fontSize: '30',
    fontFamily: 'Calibri',
    fill: 'black',
    draggable: true
});

document.getElementById("textBox").addEventListener("keyup", function () {
    text.setText(this.value);
    layer.draw();
}, true);

var stage = new Kinetic.Stage({
    container: 'container',
    width: 375,
    height: 200
});

var layer = new Kinetic.Layer();

    layer.add(text);
    stage.add(layer);

这是完整的fiddle

我还需要使用“imageLoader”插入“onLoad”图像（Yoda），所以这方面的帮助也会很好。 （如有必要，将作为单独的问题发布）。

感谢任何提示，在此先感谢

Answer 1

我能想到两个不错的选择：调整字体大小和调整文本元素的比例。两种情况都非常相似。

字体大小：

document.getElementById("textSize").addEventListener("change", function() {
    var size = this.value;
    text.fontSize(size);
    layer.draw();
}, true);

小提琴：http://jsfiddle.net/pDW34/8/

规模：

document.getElementById("textSize").addEventListener("change", function() {
    var scale = this.value/100*4;
    text.scale({x: scale, y: scale});
    layer.draw();
}, true);

小提琴：http://jsfiddle.net/pDW34/9/