1

Kinetic.js を使用して放射状グラデーションに変換を適用したいと考えています。

たとえば、中央（白）から側面への放射状のグラデーションを持つ200x200の長方形があります。グラデーションのみをスケーリングして、円形ではなく楕円形にすることができますが、長方形の正方形 (および 200x200 サイズ) をそのまま維持するにはどうすればよいですか?

4

1 に答える 1

1

KineticJS で楕円形の放射状グラデーション塗りつぶしを作成する方法は次のとおりです。

KineticJS ノード (四角形など) は、「fillPatternImage」を使用して画像を塗りつぶすことができます。

したがって、長方形を楕円形の放射グラデーションの画像で塗りつぶすことができます。

以下の「ovalGradientURL()」関数を使用して、グラデーション画像を自動的に生成できます。

もちろん、この関数を変更して、必要なさまざまなグラデーション形状/色を実行できます。この関数の戻り値は、Image() のソースとして使用できる dataURL です。次のように単純です: myImage.src=ovalGradientURL();

ovalGradientURL() は次のように機能します。

  • 隠しキャンバスの作成
  • キャンバスを放射状グラデーションで塗りつぶす
  • 放射状グラデーションをスケーリングして、グラデーションを楕円形にします: scale(2,1);

ここにコードとフィドルがあります: http://jsfiddle.net/m1erickson/jsKaB/

<!DOCTYPE HTML>
<html>
  <head>
    <style>
      body { margin: 0px; padding: 0px; }
      canvas{ border:1px solid red; }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script src="http://www.html5canvastutorials.com/libraries/kinetic-v4.3.0-beta2.js"></script>
    <script>

      // draw KineticJS stuff
      function draw(gradientImage) {

        var stage = new Kinetic.Stage({
          container: 'container',
          width: 300,
          height: 300
        });
        var layer = new Kinetic.Layer();

        var rect = new Kinetic.Rect({
          x: 50,
          y: 25,
          width: 200,
          height: 200,
          fillPatternImage: gradientImage,
          stroke: 'black',
          strokeWidth: 4
        });

        layer.add(rect);
        stage.add(layer);
      }


      // Create an image of an oval radial gradient
      // Use this image as fill for the kineticjs rect

      function ovalGradientURL(){
            // new up a canvas
            var canvas = document.createElement('canvas');
            canvas.width=200;
            canvas.height=200;
            var context = canvas.getContext('2d');
            var cx=canvas.width/4;
            var cy=canvas.height/2;
            // draw a rectangle filled with an oval gradient
            context.rect(0, 0, canvas.width, canvas.height);
            var grad = context.createRadialGradient(cx, cy, 15, cx, cy, 130);
            grad.addColorStop(0, 'white');
            grad.addColorStop(.8, 'blue');
            context.scale(2,1);
            context.fillStyle = grad;
            context.fill();
            return(canvas.toDataURL());
      }

      // create an Image() out of the canvas.toDataURL()
      // then start KineticJS draw()
      var img=new Image();
      img.onload=function(){
          draw(img);
      }
      img.src=ovalGradientURL();

    </script>
  </body>
</html>
于 2013-03-17T18:16:45.857 に答える