KineticJS Fill With Pattern
I previously asked how to fill a shape with a checkerboard effect using html5 canvas. HTML5 Canvas Fill with two colours and i was given a jsfiddle to show how to do this. http://j
Solution 1:
Yes, you can use similar code to create a kinetic polygon filled with your pattern
Fill a canvas with your pattern just as you do in native html canvas:
// 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);
Now use that temp canvas to create an image object
var img=new Image();
img.onload=function(){
// img now contains your pattern
}
img.src=pattern.toDataURL();
Finally, use fillPatternImage to fill a kinetic polygon with your pattern:
// 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
});
Here is code and a 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>
Post a Comment for "KineticJS Fill With Pattern"