在kinetic.js中變換徑向漸變

我想使用Kinetic.js將變換應用於徑向漸變。在kinetic.js中變換徑向漸變

我有，例如從中心（白色）到兩邊的徑向漸變的200x200矩形。我怎樣才能縮放漸變，以便它變成橢圓形而不是圓形，但保持矩形的正方形（和200x200大小）完整？

來源

2013-03-16 pvoosten

下面介紹如何在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>

來源

2013-03-17 18:16:45 markE

不錯的解決方法，但實際上轉化梯度本身是不可能在Kinetic.js，是這樣嗎？ – pvoosten 2013-03-17 20:48:54

不，不可能「ScaleX」漸變填充。您可以非常親密地關閉---您*可以*縮放用作圖案填充的圖像，但不是漸變填充。 – markE 2013-03-17 21:08:15

在kinetic.js中變換徑向漸變

回答

相關問題