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 を使用したことがありませんが、まだ使用していない場合は、次のアイデアを参考にしてください。イベントが発生したときに、「影のある円」が再描画されないようにしてください。2番目の例の影は、最初の例の影を複製しただけのように見えます。私が言ったように私はキネティックを本当に知りませんが、すべてを「クリア」して再描画する方法があるに違いありません。イベントが発生したときにそれを強制してみてください。それで問題が解決する場合は、問題の原因が見つかりました。

于 2013-05-16T00:35:30.073 に答える