动态JS - children

Question

我试图添加镜头玻璃来缩放图像的特定区域，我在画布上有几个层，如果我只有一个层，这个项目工作得很好。我使用以下命令添加了一个临时层(抱歉，我的经验有限)：

 var wrapper_div = document.getElementById('container1');
    var kinetic_div = wrapper_div.children[0];
    canvaso = kinetic_div.children[0];
    canvaso.setAttribute('id', "panel");
    context = canvaso.getContext('2d');

完整的项目在http://jsfiddle.net/user373721/DVSnk/2/，对于我在上面留下的文本层的演示。

要检查该问题，请单击镜头玻璃按钮，然后单击图像，镜头玻璃效果工作；然后请注释stage.add(textlayer)，镜头玻璃不再工作！我检查了temp层是否是使用Google developer tool添加的：

<div class="kineticjs-content" style="position: relative; display: inline-block; width: 400px; height: 400px;"><canvas width="400" height="400" id="panel" style="width: 400px; height: 400px; position: absolute;"></canvas><canvas width="400" height="400" style="width: 400px; height: 400px; position: absolute;"></canvas></div>

会很感谢你的建议。

Answer 1

我解决了这个问题，在使用图像镜头之前和之后删除并添加了文本层。希望这能对某些人有所帮助。