kineticjs - mask/contain images so no overlap

问题

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:

http://jsfiddle.net/vTLkn/

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.

回答1:

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>

来源：https://stackoverflow.com/questions/17724293/kineticjs-mask-contain-images-so-no-overlap

标签

html

canvas

containers

kineticjs

mask