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 
     });

Вот код и Fiddle: 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

Спасибо за ваше время. Стыдно, что вы не можете сделать это изначально в кинетическом JS, но то, что вы предложили, очень умное :) Большое спасибо – sianabanana

@sianabanana, ** это родной кинетический JS **! Мой пример выше использует кинетическую версию 4.7, но также должен работать с более ранними версиями: jsfiddle.net/m1erickson/uW8xz – markE

Plus Один для использования его для Konvajs также http://konvajs.github.io/ –

KineticJS Заполнить с рисунком

ответ

Смежные вопросы