Javascript 添加另一个形状时，形状阴影变得更可见

首先，由于最新版本中存在一个组拖拽（已知）错误，我需要使用Dynamic-v4.3.3版

所以我有一个动力学结构，如下所示：

ShapesGroup    
 ShapeGroup
  Circle
  Text

在文本或圆的“mouseenter”上，将显示一个工具提示，我们将ToolTipGroup添加到结构中。“鼠标移出”时，工具提示组被销毁

ShapesGroup  
 ShapeGroup
  Circle
  Text
  ToolTipGroup
   Rectangle
   Text

当前，每个形状和文本对象都启用了阴影。现在，每当添加ToolTipGroup时，ShapeGroup（所有ShapeGroup的容器）中的所有启用阴影的对象都会以某种方式修改其阴影属性，使其看起来更为“粗体”

这里有几个屏幕截图：聚焦于黄色香蕉形状的区域^_^

您应该能够很容易地看到ShapeGroup中的所有阴影都“更强”

这是小提琴： 当你将鼠标悬停在一个圆圈/文本上时，很容易注意到这一点

这个文件相当大，所以这里有一些相关的代码

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

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();
});

知道为什么会这样吗？这似乎是如此无关和意外，我不知道发生了什么

感谢阅读：）

编辑：由于Dragable bug“强迫”我使用较旧版本的kinetic，我尝试使用最新版本，以下是hover上发生的情况：

---

正如你所看到的，阴影问题在这里似乎不是一个问题，但其他一些问题是完全错误的

我从未使用过KineticJS，但这里有一个想法，如果你还没有使用过的话，你可能想看看。确保事件发生时“带阴影的圆”不会再次被重画。看起来第二个例子中的阴影和第一个例子中的一样。正如我所说，我真的不知道动能，但必须有一种方法“清除”所有东西并重新绘制。尝试在事件发生时强制执行，如果解决了问题，您会发现问题的根源。

我从未使用过KineticJS，但这里有一个想法，如果您还没有使用过，您可能会想检查一下。确保事件发生时“带阴影的圆”不会再次被重画。看起来第二个例子中的阴影和第一个例子中的一样。正如我所说，我真的不知道

Kinetic

，但必须有办法“清除”所有内容并重新绘制。尝试在事件发生时强制执行，如果解决了问题，您将找到问题的根源。谢谢您的回复。我做了一个快速测试，看看如果我移除mouseout上的“移除工具提示”会发生什么，我想你的怀疑可能是这个问题的原因，因为每当我进入一个圆形时，阴影会越来越暗。实际上，通过它，我注意到我有一个“dg.draw（）；”在我的鼠标事件处理程序中。除去“额外”的抽签，基本上解决了这个问题。如果你提交了一个答案，我可以接受：）嘿，很好，你已经找到了来源：）好的，我会复制/粘贴评论，虽然这远不是准确和好的答案，但我想这可能会帮助你更快地找到问题的根源。哦，天哪，这是一个非常旧的版本。你能解释一下什么是群拖错误吗？它可能已被v4.5.1修复。你说得对！整个组被绘制了两次，导致阴影叠加。我从“mouseenter”事件处理程序中删除了dg.draw（），它的响应与我预期的一样。