尝试将表单输入集成到 kinetic.js 阶段答案

【问题标题】：Trying to integrate form input to kinetic.js stage尝试将表单输入集成到 kinetic.js 阶段
【发布时间】：2012-11-13 11:58:07
【问题描述】：

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

谢谢

【问题讨论】：

您好，感谢您的回复。我已经使用 php 解决了这个问题。再次感谢。

标签： kineticjs

【解决方案1】：

现在确定我能帮上多少忙，但你去吧.. 我的解决方案是使用 PHP/AJAX/jQuery/Kinetic 实现的....虽然还没有完成完整的解决方案；我想要实现的是，用户填写表单并在提交时，PHP 将值传递给动态画布.. 下面是我用来构建文本层的内容..请注意，这是一个 javascript sn- p 用一点 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'; 
      });

这有帮助吗？

【讨论】：

【解决方案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();

    });

【讨论】：