Image KineticJS在圆内绘制图像
我尝试使用以下方法将图像放置在圆内:Image KineticJS在圆内绘制图像,image,draw,kineticjs,Image,Draw,Kineticjs,我尝试使用以下方法将图像放置在圆内: var gArrow2 = new Image(); gArrow2.src = '../../Content/images/green_s.png'; var circle2 = new Kinetic.Circle({ drawFunc: function(canvas) { var context = canvas.getContext();
var gArrow2 = new Image();
gArrow2.src = '../../Content/images/green_s.png';
var circle2 = new Kinetic.Circle({
drawFunc: function(canvas) {
var context = canvas.getContext();
context.drawImage(gArrow2, 256, 256, 11, 23);
context.beginPath();
context.arc(256, 256, this.getRadius(), 0, 2 * Math.PI, false);
context.lineWidth = this.getStrokeWidth();
context.strokeStyle = this.getStroke();
context.stroke();
},
x: 256,
y: 256,
radius: 70,
stroke: '#00ffff',
strokeWidth: 4,
opacity: 0.5
});
layer2.add(circle2);
它不起作用!我将感谢您的建议,提前谢谢。您必须给gArrow2时间加载。您可以通过gArrow2.onload完成此操作 始终将gArrow2.src放在它的加载后 然后将任何使用gArrow2的代码放入onload函数中 [编辑以添加layer2.draw()] 我插入了你的代码,让它工作了 看起来所需要的只是layer2.draw() 下面是代码和小提琴:
原型
#容器{
边框:实心1px#ccc;
边缘顶部:10px;
}
$(函数(){
var阶段=新的动力学阶段({
容器:'容器',
宽度:600,
身高:600
});
var layer2=新的动能层();
阶段。添加(第2层);
var gArrow2=新图像();
gArrow2.onload=函数(){
var circle2=新的动力学圆({
drawFunc:函数(画布){
var context=canvas.getContext();
drawImage(gArrow2,256,256,11,23);
context.beginPath();
arc(256,256,this.getRadius(),0,2*Math.PI,false);
context.lineWidth=this.getStrokeWidth();
context.strokeStyle=this.getStroke();
stroke();
},
x:256,
y:256,
半径:70,
笔划:“#00ffff”,
冲程宽度:4,
不透明度:0.5
});
第2层。添加(圆圈2);
第2层。绘制();
}
gArrow2.src=http://dl.dropbox.com/u/139992952/stackoverflow/house1.jpg';
}); // end$(函数(){});
再次感谢您的帮助。不幸的是,它没有工作,我甚至没有得到的圆圈。感谢标记,我使用了您帮助我的前一个drawFunc解决方案,并且在onload之后放置了src,效果非常好。谢谢你的帮助。
<!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://www.html5canvastutorials.com/libraries/kinetic-v4.3.3-beta.js"></script>
<style>
#container{
border:solid 1px #ccc;
margin-top: 10px;
}
</style>
<script>
$(function(){
var stage = new Kinetic.Stage({
container: 'container',
width: 600,
height: 600
});
var layer2 = new Kinetic.Layer();
stage.add(layer2);
var gArrow2 = new Image();
gArrow2.onload=function(){
var circle2 = new Kinetic.Circle({
drawFunc: function(canvas) {
var context = canvas.getContext();
context.drawImage(gArrow2, 256, 256, 11, 23);
context.beginPath();
context.arc(256, 256, this.getRadius(), 0, 2 * Math.PI, false);
context.lineWidth = this.getStrokeWidth();
context.strokeStyle = this.getStroke();
context.stroke();
},
x: 256,
y: 256,
radius: 70,
stroke: '#00ffff',
strokeWidth: 4,
opacity: 0.5
});
layer2.add(circle2);
layer2.draw();
}
gArrow2.src = 'http://dl.dropbox.com/u/139992952/stackoverflow/house1.jpg';
}); // end $(function(){});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>