3

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

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

ShapesGroup    
 ShapeGroup
  Circle
  Text

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

ShapesGroup  
 ShapeGroup
  Circle
  Text
  ToolTipGroup
   Rectangle
   Text

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

这是几个屏幕截图：关注黄色香蕉形状的区域^_^

在具有正常阴影的图片之前。 具有更大胆阴影的图片后。

您应该能够轻松地看到 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();
});

任何想法为什么会发生这种情况？它似乎如此无关和出乎意料，以至于我不确定发生了什么。

谢谢阅读 ：）

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

悬停在最新版本的动力学上

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

4

1 回答 1

2

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

于 2013-05-16T00:35:30.073 回答