1

我想使用 Kinetic.js 对径向渐变应用变换。

例如，我有一个 200x200 的矩形，从中心（白色）到侧面有一个径向渐变。如何仅缩放渐变，使其变为椭圆形而不是圆形，但保持矩形的正方形（和 200x200 大小）完好无损？

4

1 回答 1

1

这是在 KineticJS 中创建椭圆形径向渐变填充的方法

KineticJS 节点（如您的矩形）可以使用“fillPatternImage”填充图像。

因此，您可以用椭圆形辐射渐变的图像填充您的矩形。

您可以使用下面的“ovalGradientURL()”函数自动生成渐变图像。

当然，你可以修改这个函数来做任何你需要的渐变形状/颜色。此函数的返回值是一个 dataURL，您可以将其用作 Image() 的源。就这么简单：myImage.src=ovalGradientURL();

椭圆渐变URL（）的工作原理：

  • 创建隐藏画布
  • 用径向渐变填充画布
  • 通过缩放径向渐变来制作渐变椭圆： 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 回答