Kinetic JS - 儿童

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），镜头玻璃不再工作了！我检查了是否使用Google开发人员工具添加了临时图层：

<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

我通过在使用图像镜头之前和之后移除和添加文本层来解决了这个问题。希望这可以帮助别人。