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:

overlap example http://i39.tinypic.com/119xbv6.png

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.

标签： html5 canvas containers kineticjs mask

1条回答

混吃等死

2楼-- · 2019-06-01 06:55

You can use a Kinetic Group plus “yoda cropping” to be sure your images don’t overlap

enter image description here

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>

0人赞添加讨论(0) 举报

kineticjs - mask/contain images so no overlap

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间