kineticjs - 掩码/包含图像所以没有重叠 [英] kineticjs - mask/contain images so no overlap
问题描述
我有2张图片在我的舞台上2帧的覆盖图像下面。用户可以拖动每个图像，就好像它们将每个图像定位在相框内。我的问题是在这个例子中的yoda图像可以重叠和出现在darth vader框架左侧（反之亦然），如下所示：
< img src =http://i39.tinypic.com/119xbv6.pngalt =重叠示例>
jsfiddle这里：
<！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.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
}）
。添加（组）;
////////////////////////////
// START
//////////////////////////
var frame = new Image（）;
frame.onload = function（）{
var pic = new Image（）;
pic.onload = function（）{
var inner = new Kinetic。图片（{
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>
i have 2 images on my stage underneath an overlay image of 2 frames. The user can drag each image as if they were positioninng each image inside a photo frame. The problem i have is the yoda image in this example can overlap and appear inside the darth vader frame on the left (and vice-versa), as shown here:
jsfiddle here:
Is there a way of placing the images inside some form of container or rectangle to stop this so they cannot appear inside another 'frame'?
The final page could end up having up to 5 or 6 frames and images with each image able to be scaled up or down as well as being dragged by the user anywhere they want (i had looked at the dragBoundsFunc but i don't actually want to restrict where they place it just stop the overlapping.
I also tried using a rectangle as an image mask and the image as the fillPatternImage attribute but i cannot then drag and scale the image inside then, just the rectangle itself.
You can use a Kinetic Group plus "yoda cropping" to be sure your images don’t overlap
First create a Group that will contain both the picture frame and the Yoda:
If you need to drag or scale, you would drag or scale the Group (all contained elements would react accordingly)
var group=new Kinetic.Group({
x:20,
y:20,
width:256,
height:256,
draggable:true
})
layer.add(group);
Then add Yoda image which has been cropped to fit in the picture frame.
Since this Yoda image in in the background (lower z-index), any slight overlap with the picture frame will be hidden by the larger picture frame.
Here, the Yoda would be bigger than the picture frame, so it needs to be cropped a bit.
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);
Finally, add the picture frame which will be scaled to fit in the group using width/height:
var outer=new Kinetic.Image({
image:pictureFrame,
x:0,
y:0,
width:256,
height:256,
});
group.add(outer);
Here is code and a Fiddle: 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>
这篇关于kineticjs - 掩码/包含图像所以没有重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
