1

キャンバスにドロップ可能な領域を配置して、画像をドラッグできるようにしたいのですが、ドロップ可能な領域の周りに光るパルス効果を追加して、オブジェクトをドラッグできる場所を簡単に見つけられるようにします。

HTML5キャンバスのようなものが形状の外側のグロー効果を作成することを発見しましたが、それはパルスのようにアニメーション化されていません。

たとえば、この長方形のように：

  var stage = new Kinetic.Stage({
        container: 'container',
        width: 578,
        height: 200
      });

      var layer = new Kinetic.Layer();

      var rect = new Kinetic.Rect({
        x: 239,
        y: 75,
        width: 100,
        height: 50,
        fill: 'white',
        stroke: 'black',
        strokeWidth: 4
      });

      // add the shape to the layer
      layer.add(rect);

      // add the layer to the stage
      stage.add(layer);

しかし、その黒の代わりに、私は脈打つ金のストロークが欲しいです。

考え？

4

2 に答える 2

1

このようなものをお探しですか？http://lamberta.github.com/html5-animation/examples/ch03/05-pulse.html

本質的に、それは正弦関数を使用して行われ（以下のコードはlambertaプロジェクトから取得されます）、かなり自明です：

 var canvas = document.getElementById('canvas'),
      context = canvas.getContext('2d'),
      ball = new Ball(),
      angle = 0,
      centerScale = 1,
      range = 0.5,
      speed = 0.05;

  ball.x = canvas.width / 2;
  ball.y = canvas.height / 2;

  (function drawFrame () {
    window.requestAnimationFrame(drawFrame, canvas);
    context.clearRect(0, 0, canvas.width, canvas.height);

    ball.scaleX = ball.scaleY = centerScale + Math.sin(angle) * range;
    angle += speed;
    ball.draw(context);
  }());
于 2012-11-27T22:12:12.803 に答える
1

あなたの質問が何であるかはわかりませんが、kineticjsを使用して円でパルスを作成するのは非常に簡単です。このようなもの：

var pulserect= rect.clone();
pulserect.setFill('gold');
pulserect.setScale(2,2);
layer.draw();

pulse.transitionTo({
scale:{x:0.5,
       y:0.5},
opacity:0.5,
duration: 0.5
});

jsfiddle

于 2012-11-28T08:32:57.627 に答える