Question

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

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

Answer 1

以下是如何在KineticJS中创建椭圆径向渐变填充

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

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

您可以使用下面的“ovalGradientURL（）”功能自动生成渐变图像。

当然，您可以修改此功能以执行您需要的各种渐变形状/颜色。此函数的返回值是dataURL，您可以将其用作Image（）的源。这很简单：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>

在kinetic.js中变换径向渐变

1 个答案: