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

时间:2012-11-13 11:58:07

标签: kineticjs

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

由于

2 个答案:

答案 0 :(得分:0)

现在确定我可以提供多少帮助但是你去了..我的解决方案是使用PHP / AJAX / jQuery / Kinetic实现的......虽然还没有完成整个解决方案;我想要实现的是,用户填写表单并在提交时,PHP将值传递给动态画布..下面是我用来构建文本图层的内容..明白你,这是一个javascript片段与一个小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'; 
      });

这有帮助吗?

答案 1 :(得分:0)

只是因为其他人有这个问题(像我; 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();

    });