添加另一个形状时，Kinetic JS形状阴影会更加明显

Question

首先，由于最新版本中的组拖动（已知）错误，我需要使用版本kinetic-v4.3.3。

所以我的动力学结构如下：

ShapesGroup    
 ShapeGroup
  Circle
  Text

在文本或圆上的'mouseenter'上，会显示一个工具提示，我们将ToolTipGroup添加到结构中。在'mouseout'上，ToolTipGroup被销毁。

ShapesGroup  
 ShapeGroup
  Circle
  Text
  ToolTipGroup
   Rectangle
   Text

目前，每个形状和文本对象都启用了阴影。现在，每当添加ToolTipGroup时，似乎ShapesGroup内的所有阴影启用对象（所有ShapeGroups的容器）都以某种方式修改了阴影属性，使它们看起来更加“粗体”。

以下是几个屏幕截图：专注于黄色香蕉形区域^ _ ^

您应该能够轻松地看到ShapesGroup中的所有阴影都“更强”。

这是小提琴：http://jsfiddle.net/Robodude/LxhLX/3/ 无论何时将鼠标悬停在圆圈/文本上，都会很容易注意到。

calendar.js文件非常庞大，所以这里有一些相关的代码。

这是创建工具提示动力学对象的方法。

Day.prototype.createDataToolTip = function (data, target, xOffset, yOffset) {
    var month = this.parent;
    var year = month.parent;
    var calendar = year.parent;

    var stagePos = calendar.stage.getPosition();
    var mousePos = calendar.stage.getMousePosition();
    var bgLayerPos = calendar.stage.get(".bgCalendarLayer")[0].getPosition();
    var dataPos = calendar.stage.get(".dataGroup")[0].getPosition();
    var targetPos = target.getPosition();
    var parentPos = target.parent.getPosition();
    var width = target.getWidth();
    var height = target.getWidth();


    var widthMultiplier = 5;
    var newW = calendar.dayWidth * widthMultiplier;

    var alreadyDisplayed = target.parent.get(".toolTipGroup_" + data.Id)[0];

    if (alreadyDisplayed == null) {
        var padding = 6;
        var tooltipText = new Kinetic.Text({
            text: data.HoverText,
            x: padding,
            y: padding,
            //height:(calendar.dayHeight * 4) - padding,
            width: (calendar.dayWidth * widthMultiplier) - (padding * 2),
            align: "left",
            fontSize: 12,
            fontFamily: 'Tahoma',
            fontStyle: 'bold',
            fill: 'white',
            //shadowColor: 'black',
            id: "tooltipText_" + data.Id,
            name: "tooltipText_" + data.Id
        });

        var th = tooltipText.getHeight();

        var tooltipBG = new Kinetic.Rect({
            height: th + (padding / 2) + tooltipText.getFontSize(),
            width: calendar.dayWidth * widthMultiplier,
            //fill: data.Color,
            stroke: 'black',
            strokeWidth: 1,
            fillLinearGradientStartPoint: [-50, -50],
            fillLinearGradientEndPoint: [50, 50],
            fillLinearGradientColorStops: [0, 'white', 1, data.Color],
            name: "toolTipBG_" + data.Id,
            id: "toolTipBG_" + data.Id,
            shadowColor: 'black',
            shadowBlur: 10,
            shadowOffset: 5,
            shadowOpacity: .5
        });

        var newX = 0 - (newW / 2);
        var newY = yOffset + 1;

        if (parentPos.y > calendar.stage.getHeight() / 2) // if the shape is in bottom half of the screen
        {
            newX = 0 - (newW / 2);
            newY = -yOffset - 1 - tooltipBG.getHeight();
        }


        var tooltipGroup = new Kinetic.Group({
            x: newX,
            y: newY,
            name: "toolTipGroup_" + data.Id,
            id: "toolTipGroup_" + data.Id
        });


        tooltipGroup.add(tooltipBG);
        tooltipGroup.add(tooltipText);

        target.parent.add(tooltipGroup);

        target.parent.draw();
        console.log(target.parent);
    }


}

这是圆圈上'mouseenter'的事件处理程序：

dataCircle.on("mouseenter", function () {
    this.parent.moveToTop();
    if (calendar.miniMap != false) {
        var parent = this.parent;
        var text = parent.get(".dataCircleText_" + data.Id)[0];
        text.moveToTop();
        day.createDataToolTip(data, this, this.attrs.radius, this.attrs.radius);
    }
    dg.draw();
});

为什么会发生这种情况？看起来如此无关和意外，我不确定发生了什么。

感谢阅读：）

编辑：由于可拖动的错误“强迫”我使用旧版本的动力学，我尝试使用最新版本，这就是悬停时发生的事情：

正如你所看到的，阴影问题似乎不是一个问题 - 但其他一些东西是完全错误的-_- ;;

Answer 1

我从未使用过KineticJS，但这里有一个想法，你可能想看看你是否还没有。当您的活动发生时，请确保您的“带阴影的圈子”不会再次重绘。看起来第二个例子中的阴影看起来就像第一个例子中的重复一样。正如我所说，我真的不知道Kinetic，但必须有一种方法可以“清除”所有内容并重新绘制它。尝试在事件发生时强制它，如果修复了它，你就找到了你的问题来源。