kineticjs - 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

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