html5 - kineticjs - mask/contain images so no overlap -
i have 2 images on stage underneath overlay image of 2 frames. user can drag each image if positioninng each image inside photo frame. problem have yoda image in example can overlap , appear inside darth vader frame on left (and vice-versa), shown here:
overlap example http://i39.tinypic.com/119xbv6.png
jsfiddle here:
is there way of placing images inside form of container or rectangle stop cannot appear inside 'frame'?
the final page end having 5 or 6 frames , images each image able scaled or down being dragged user anywhere want (i had looked @ dragboundsfunc don't want restrict place stop overlapping.
i tried using rectangle image mask , image fillpatternimage attribute cannot drag , scale image inside then, rectangle itself.
you can use kinetic group plus “yoda cropping” sure images don’t overlap
first create group contain both picture frame , yoda:
if need drag or scale, drag or scale group (all contained elements react accordingly)
var group=new kinetic.group({ x:20, y:20, width:256, height:256, draggable:true }) layer.add(group); then add yoda image has been cropped fit in picture frame.
since yoda image in in background (lower z-index), slight overlap picture frame hidden larger picture frame.
here, yoda bigger picture frame, needs cropped 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 picture frame scaled fit in group using width/height:
var outer=new kinetic.image({ image:pictureframe, x:0, y:0, width:256, height:256, }); group.add(outer); here code , 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> 
Comments
Post a Comment