KineticJS填充图案 [英] KineticJS Fill with pattern
本文介绍了KineticJS填充图案的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我以前问过如何使用html5 canvas来填充棋盘效果的形状。
<！DOCTYPE html>
< html>
< head>
< meta charset =utf-8>
< title> Prototype< / title>
< script type =text / javascriptsrc =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）;
//使用临时画布创建一个模式
var pattern = document.createElement（'canvas'）;
pattern.width = 40;
pattern.height = 40;
var pctx = pattern.getContext （0,0,20,20）;
pctx.fillRect（20，2d'）;
pctx.fillStyle =rgb（188，222，178）;
pctx.fillRect 20,20,20）;
//从临时画布模式创建一个图像
var img = new Image（）;
img.onload = function（）{
//使用模式填充动力多边形
var polyPattern = new Kinetic.Polygon（{
points：[30,30，300,30，400,60，300,150 ，200,50，100,450]，
fillPatternImage：img，
stroke：'black'，
strokeWidth：3
}）;
//将形状添加到图层和layer.draw（）
layer.add（polyPattern）;
layer.draw（）;
}
img.src = pattern.toDataURL（）;
}）; // end $（function（）{}）;
< / script>
< / head>
< body>
< div id =container>< / div>
< / body>
< / html>
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://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();
I would like to know know how its possible to convert this syntax to KineticJS? I notice from the kineticjs doc and examples, that you can fill with an image or a gradient, but there is no mention of filling with a pattern.
Surely this can be done if it can be done natively with html5?
解决方案
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>
这篇关于KineticJS填充图案的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
