使用dynamicjs添加新图层后，无法在图层上编辑文本 [英] I can't edit text on layer after add new layer using kineticjs

问题描述

我已经制作了 http://jsfiddle.net/62Wjc/5/，然后创建并更改图层上的文本，但这是静态的.现在，我为动态添加字段+添加图层+更改图层制作脚本.

I have make this http://jsfiddle.net/62Wjc/5/, create and change text on layer but it's static. Now I make script for dynamic add fields + add layer + change layer.

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

On my script have three functions, which are :

1. 函数CreateTxt用于创建元素并使用KineticJS创建图层.
2. 用于删除元素的功能fRField
3. 功能ChangeTxt用于更改图层上的文本.

1. Function CreateTxt for create element and create layer with KineticJS.
2. Function fRField for remove element
3. Function ChangeTxt for change text on layer.

这是我的脚本:

$(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: http://jsfiddle.net/8oLsoo25/5/

jsfiddle : http://jsfiddle.net/8oLsoo25/5/

添加新文本后，我无法首先在图层上更改文本.

After add a new text, I can't change text on layer first.

推荐答案

您对nwValue的$.each调用对您来说是一团糟.如果将nwValue = [];放在CreateTxt中的nwValue.push(idV);上方，则一切正常.换句话说，您要替换对原始对象的引用.另外，您是否知道Kinetic中的新Layer意味着DOM中的新canvas元素?

Your $.each call for nwValue is ruining things for you. If you place nwValue = []; above nwValue.push(idV); in CreateTxt, everything works as expected. In other words, you're replacing references to the original objects. Also, do you know that a new Layer in Kinetic means a new canvas element in the DOM?

这篇关于使用dynamicjs添加新图层后，无法在图层上编辑文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！