javascript - 添加另一个形状时，动力学 JS 形状阴影变得更加明显

Question

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

所以我有一个动力学结构如下:

ShapesGroup    
 ShapeGroup
  Circle
  Text

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

ShapesGroup  
 ShapeGroup
  Circle
  Text
  ToolTipGroup
   Rectangle
   Text

目前每个形状和文本对象都启用了阴影。现在，无论何时添加 ToolTipGroup，ShapesGroup(所有 ShapeGroup 的容器)内的所有启用阴影的对象似乎都会以某种方式修改其阴影属性，以便它们看起来更“粗体”。

这里有几个屏幕截图:关注黄色香蕉形区域 ^_^

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

这是 fiddle :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();
});

知道为什么会这样吗？它看起来如此无关和出乎意料，以至于我不确定发生了什么。

感谢阅读:)

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

如您所见，阴影问题在这里似乎不是问题 - 但其他问题完全不对 -_-;;

Answer 1

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