Question

我通过为用户图像上传和文字样式（颜色，重量，字体样式等等）制作一个用于杯子设计师画布的90％的方式，但是我无法理解一个错误。我的代码。

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

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

我还需要拥有＆＃34; onLoad＆＃34;使用＆＃34; imageLoader＆＃34;插入的（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/

kineticjs用户输入来改变文本大小

1 个答案: