在kinetic.js中变换径向渐变

问题描述：

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

我有，例如从中心（白色）到两边的径向渐变的200x200矩形。我怎样才能缩放渐变，以便它变成椭圆形而不是圆形，但保持矩形的正方形（和200x200大小）完整？

答

下面介绍如何在KineticJS创建一个椭圆形的放射状渐变填充

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

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

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

当然，您可以修改此功能以执行您需要的各种渐变形状/颜色。这个函数的返回值是一个可以用作Image（）的源的dataURL。简单如下：myImage.src = ovalGradientURL（）;

ovalGradientURL（）的工作原理是：

创建隐藏的画布
具有径向梯度
通过缩放径向渐变使得渐变椭圆填充画布：比例（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，是这样吗？ – pvoosten 2013-03-17 20:48:54

不，不可能“ScaleX”渐变填充。您可以非常亲密地关闭---您*可以*缩放用作图案填充的图像，但不是渐变填充。 – markE 2013-03-17 21:08:15

在kinetic.js中变换径向渐变

相关推荐