Question

我有一个用KineticJs Stage创建的画布。在这个阶段我有三层。一个是背景，并始终开启。另外两个是叠加层，可见性由复选框切换。每当这个阶段的父div调整大小时，我重绘整个舞台以保持我的布局正确。以下是我的切换工作的两种情况： 1.在调整大小和重绘之前。 2.如果我在重绘之前根本没有切换它。

这是不起作用的地方： 1.打开图层然后关闭。调整画布大小以触发重绘。然后尝试切换回来。在这种情况下，当我调用show（）时，visible属性设置为true，但实际上并没有显示该层。

单步执行代码我在上述任何场景中都无法找到任何差异。然而，我注意到每个层的索引在每次重建时都会增加，即使我已经实例化了阶段的新实例，并且每次重建时都会实例化每个层。

任何人都可以告诉我为什么索引会增加，即使所有内容都已被破坏以及为什么图层没有显示？我在考虑zindex，但这似乎永远不会改变，应该出现。

这是我在每次重建之前所做的事情：

stage = new $window.Kinetic.Stage({
                container: 'canvas',
                x: 0,
                y: 0,
                width: parent.clientWidth,
                height: parent.clientHeight
            });
            var layer = new $window.Kinetic.Layer();
            erosionLayer = new $window.Kinetic.Layer({
                visible: scope.erosionVisible
            });

这是我切换它的地方：

 scope.$watch('erosionVisible', function(val) {
            if (!erosionLayer) return;

            var showErosion = false;

            if (!scope.erosionVisible) {
                showErosion = false;
            } else if (scope.erosionVisible) {
                showErosion = true;
            }

            if (showErosion) {
                erosionLayer.show();

            } else {
                erosionLayer.hide();
            }
        });

仅供参考，这是在angularJs指令中。

Answer 1

解决了这个问题。出于某种原因，如果阶段已经重建，我需要在切换时调用图层上的绘图。

在重建阶段后切换KineticJs图层

1 个答案: