使用kineticjs添加新图层后,我无法在图层上编辑文本

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

我的脚本有三个function,分别是:

  1. functionCreateTxt用于创建元素并使用KineticJS创建图层。
  2. 函数fRField用于删除元素
  3. functionChangeTxt用于更改图层上的文本。

这是我的剧本:

 $(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/

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

你的$.each调用nwValue会破坏你的东西。 如果你放置nwValue = [];nwValue.push(idV);之上nwValue.push(idV);CreateTxt ,一切都按预期工作。 换句话说,您正在替换对原始对象的引用。 另外,您是否知道动态中的新图层意味着DOM中的新canvas元素?