Javascript 我能'；使用kineticjs添加新层后，编辑层上的文本

我做了这个，在图层上创建和更改文本，但它是静态的。现在我为动态添加字段+添加层+更改层制作脚本

在我的脚本上有三个功能，分别是：

用于创建元素和使用KineticJS创建层的函数

CreateTxt

用于删除元件的功能

fRField

用于更改图层上的文本的函数

ChangeTxt

这是我的剧本：

$(document).ready(function() {

    var nwValue = [];
    var nwLayer = {};
    var nwTxt = {};
    var tulisan = 'Your text here';
    var con = $('#idEditor');
    var cW = con.width();
    var cH = con.height();
    var stage = new Kinetic.Stage({
        container: 'idEditor',
        width: cW,
        height: cH
    });

    $('a[data-selector="get_new_txt"], a[data-selector="get_new_img"]').on('click', function(event){
        var time = new Date().getTime();
        var regexp = new RegExp($(this).data('id'), 'g');
        $('#nF').append($(this).data('fields').replace(regexp, time));
        CreateTxt(time);
        event.preventDefault();
    });

    $('#nF').on('click', 'a[data-selector="removeField"]', function(e) {
        var a = $(this);
        fRField(a);
        e.preventDefault();
    });

    $('#nF').on('keyup', 'input[data-selector="inputName"]', function() {
        var a = $(this);
        ChangeTxt(a);
    });

    function CreateTxt(idV) {
        var iclone = 0;
        nwValue.push(idV);
        $.each(nwValue, function( index, value ){
          nwLayer["layer"+ value] = new Kinetic.Layer();
        });

        stage.add(nwLayer["layer"+ idV]);
        $.each(nwValue, function( index, value ){
          nwTxt["text"+ value] = new Kinetic.Text({
                x: 100,
                y: 100,
                text: "Your text here",
                fontSize:18,
                fill: 'red',
                draggable: true,
                id: 'txt'+ value
            });
        });
        nwLayer["layer"+ idV].add(nwTxt["text"+ idV]);
        nwLayer["layer"+ idV].draw();      
    }

    function fRField(a){
      if(confirm('Are you sure to delete this field ?')) {
        a.prev("input[type=hidden]").value = "1";
        a.closest(".form-inline").remove();
      }
      return false;
    }

    function ChangeTxt(a){
        var dataid = a.attr('data-id');
        var newValue = a.val();
        nwTxt["text"+ dataid].setText(newValue);
        nwLayer["layer"+ dataid].draw();
    }

});

jsfiddle：

---

添加新文本后，我无法先更改图层上的文本。

您的

$。每次调用
nwValue
都会毁了您的一切。如果您放置
nwValue=[]以上<代码>nwValue.push（idV）
在
CreateTxt
中，一切正常。换句话说，您正在替换对原始对象的引用。另外，您知道Dynamic中的新层意味着DOM中的新画布元素吗
 谢谢@truefusion，这很有效。当然，我知道。说实话，我昨天刚学了kineticjs。我只是想知道，我上面的脚本是否符合javascript和kinecticjs的概念？。我创建新层（画布），因为我不知道如何将text2放在text1前面。哦，我知道，我只需要创建一个包含多个文本的层，然后使用
.moveToTop（）
移动到顶部文本，使用
.moveToBottom（）
移动到底部另一个文本。Thanks@itx以下是您可以对代码做的几项改进：对于初学者，不需要保留对层的外部引用，因为动能保留对层的内部引用，并且可以使用
Kinetic.Stage.getLayers（）
进行检索。Kinetic还允许我们使用
Kinetic.Container.find（“#idOfChild”）
（层继承自容器，因此它有
find（）
）。可以使用
Kinetic.Node.setId（）
在任何节点（例如层、文本）上设置ID。