KineticJS填充圖案

我以前問過如何使用html5畫布填充具有棋盤效果的形狀。 HTML5 Canvas Fill with two colours KineticJS填充圖案

我給了一個jsfiddle來演示如何做到這一點。 http://jsfiddle.net/NdUcv/2/

var can = document.getElementById('canvas1'); 
var ctx = can.getContext('2d'); 

// set up a pattern, something really elaborate! 
var pattern = document.createElement('canvas'); 
pattern.width = 40; 
pattern.height = 40; 
var pctx = pattern.getContext('2d'); 

pctx.fillStyle = "rgb(188, 222, 178)"; 
pctx.fillRect(0,0,20,20); 
pctx.fillRect(20,20,20,20); 

// Now we draw that pattern to a custom shape: 

var pattern = ctx.createPattern(pattern, "repeat"); 
ctx.beginPath(); 
ctx.moveTo(30, 30); 
ctx.lineTo(300, 30); 
ctx.lineTo(400, 60); 
ctx.lineTo(300, 150); 
ctx.lineTo(200, 50); 
ctx.lineTo(100, 450); 
//ctx.closePath(); 
ctx.fillStyle = pattern; 
ctx.fill();

我想知道懂得它可以將這種語法轉換KineticJS？我注意到kineticjs文檔和示例，您可以填充圖像或漸變，但沒有提及填充模式。

當然，這可以做到，如果它可以用html5本地完成？

來源

2013-10-03 sianabanana

是的，你可以使用類似的代碼來創建充滿你的模式動能多邊形

enter image description here

填寫您的圖案帆布就像在本地的HTML帆布做的事：

// use a temp canvas to create a pattern 
    var pattern = document.createElement('canvas'); 
    pattern.width = 40; 
    pattern.height = 40; 
    var pctx = pattern.getContext('2d'); 
    pctx.fillStyle = "rgb(188, 222, 178)"; 
    pctx.fillRect(0,0,20,20); 
    pctx.fillRect(20,20,20,20);

現在使用該溫度畫布創建圖像對象

var img=new Image(); 
    img.onload=function(){ 
      // img now contains your pattern 
    } 
    img.src=pattern.toDataURL();

最後，使用fillPatternImage填補動力學多邊形的圖案：

 // make a kinetic polygon filled with the pattern 
     var polyPattern = new Kinetic.Polygon({ 
      points: [30,30, 300,30, 400,60, 300,150, 200,50, 100,450], 
      fillPatternImage: img, 
      stroke: 'black', 
      strokeWidth: 3 
     });

這裏是代碼和一個小提琴：http://jsfiddle.net/m1erickson/uW8xz/

<!DOCTYPE html> 
<html> 
    <head> 
    <meta charset="utf-8"> 
    <title>Prototype</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.0.min.js"></script> 

<style> 
#container{ 
    border:solid 1px #ccc; 
    margin-top: 10px; 
    width:400px; 
    height:400px; 
} 
</style>   
<script> 
$(function(){ 

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

    // use a temp canvas to create a pattern 
    var pattern = document.createElement('canvas'); 
    pattern.width = 40; 
    pattern.height = 40; 
    var pctx = pattern.getContext('2d'); 
    pctx.fillStyle = "rgb(188, 222, 178)"; 
    pctx.fillRect(0,0,20,20); 
    pctx.fillRect(20,20,20,20); 

    // make an image from the temp canvas pattern 
    var img=new Image(); 
    img.onload=function(){ 

     // make a kinetic polygon filled with the pattern 
     var polyPattern = new Kinetic.Polygon({ 
      points: [30,30, 300,30, 400,60, 300,150, 200,50, 100,450], 
      fillPatternImage: img, 
      stroke: 'black', 
      strokeWidth: 3 
     }); 
     // add the shape to the layer and layer.draw() 
     layer.add(polyPattern); 
     layer.draw(); 

    } 
    img.src=pattern.toDataURL(); 


}); // end $(function(){}); 

</script>  
</head> 

<body> 
    <div id="container"></div> 
</body> 
</html>

來源

2013-10-03 16:13:30 markE

感謝您的時間。恥辱你不能只在kineticJS本身做，但你提供的是非常聰明:)非常感謝 – sianabanana

@sianabanana，**這是本地kineticJS **！我上面的例子使用動力學版本4.7，但也應該使用早期版本：jsfiddle.net/m1erickson/uW8xz – markE

另外一個用於Konvajs也http://konvajs.github.io/ –

KineticJS填充圖案

回答

相關問題