您可以使用 Kinetic Group 和“yoda 裁剪”来确保您的图像不会重叠

首先创建一个包含相框和 Yoda 的组:
如果您需要拖动或缩放,您将拖动或缩放组(所有包含的元素都会做出相应的反应)
var group=new Kinetic.Group({
x:20,
y:20,
width:256,
height:256,
draggable:true
})
layer.add(group);
然后添加已裁剪以适合相框的 Yoda 图像。
由于此 Yoda 图像在背景中(较低的 z-index),因此与相框的任何轻微重叠都将被较大的相框隐藏。
在这里,尤达会比相框大,所以需要稍微裁剪一下。
var inner=new Kinetic.Image({
image:Yoda,
x:44,
y:44,
width:168,
height:162,
crop:{
x: 23,
y: 38,
width: 168,
height: 162
}
});
group.add(inner);
最后,添加将使用宽度/高度缩放以适合组的相框:
var outer=new Kinetic.Image({
image:pictureFrame,
x:0,
y:0,
width:256,
height:256,
});
group.add(outer);
这是代码和小提琴:http: //jsfiddle.net/m1erickson/qGHZn/
<!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.5.4.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: 400,
height: 400
});
var layer = new Kinetic.Layer();
stage.add(layer);
var group=new Kinetic.Group({
x:20,
y:20,
width:256,
height:256,
draggable:true
})
layer.add(group);
//////////////////////////
// START
//////////////////////////
var frame=new Image();
frame.onload=function(){
var pic=new Image();
pic.onload=function(){
var inner=new Kinetic.Image({
image:pic,
x:44,
y:44,
width:168,
height:162,
crop:{
x: 23,
y: 38,
width: 168,
height: 162
}
});
group.add(inner);
var outer=new Kinetic.Image({
image:frame,
x:0,
y:0,
width:256,
height:256,
});
group.add(outer);
layer.draw();
}
pic.src="http://www.html5canvastutorials.com/demos/assets/yoda.jpg";
}
frame.src="woodenframe.png";
}); // end $(function(){});
</script>
</head>
<body>
<div id="container"></div>
</body>
</html>