kineticjs - 尝试将表单输入集成到 kinetic.js 阶段

Question

我有一个用动力学构建的舞台/画布，目前，我正在实现我所需要的......但是，我需要让它在某种意义上变得动态，用户可以在同一页面上填写表格并提交，输入被发送到 javascript 并显示在画布舞台上.. 到目前为止，我没有运气在处理画布显示的同一脚本上使用 javascript 的 getElementById ......有人可以帮我吗？

谢谢

Answer 1

现在确定我能帮上多少忙，但你去吧。我的解决方案是使用 PHP/AJAX/jQuery/Kinetic 实现的。虽然还没有完成完整的解决方案；我想要实现的是，用户填写表单并在提交时，PHP 将值传递给动态画布。下面是我用来构建文本层的内容。请注意，这是一个带有一个小 php 来输出文本字符串..

    var companyMessage = new Kinetic.Text({
        x: 5,
        y: 35,
        fill: 'transparent',
        text: '<?php echo $coy_messg ?>', // php code wrapped between php tags
        fontSize: 14,
        fontFamily: 'Georgia',
    textFill: '#555',
        padding: 4,
        align: 'center',
        fontStyle: 'normal',
        cornerRadius: 0,
        draggable: true,
      });
// add cursor styling
      companyMessage.on('mouseover', function() {
        document.body.style.cursor = 'move';
      });
      companyMessage.on('mouseout', function() {
         document.body.style.cursor = 'default'; 
      });

这有帮助吗？

Answer 2

以防万一其他人有这个问题（比如我；p），这是一个小提琴，使用 javascript 变量和动态 JS node.setText 属性来更新画布：

http://jsfiddle.net/skye/zBUQs/1/

//Make a variable to hold the updatable canvas text//
var newName = 'some text to look at';

//Create canvas text with variable inside it
var complexText = new Kinetic.Text({
            x: 30,
            y: 50,
            text: newName,
            fontSize: 18,
            fontFamily: 'Calibri',
            fill: '#555',
            width: 380

 });

//Add text to layer
layer.add(complexText);
//Add layer to stage
stage.add(layer);

//On button click
$('#updateBtn').click(function (e) {

       //change the value of newname to the input value
       newName = $('#name').val();
        //insert the new value into the canvas text
       complexText.setText(newName);
        //redraw the layer
       layer.draw();

    });