i have image 8 anchor points. example, i've managed on 4 corners scale picture. having difficulty in making other 4 stretch image only.
the midtop & midbottom anchors shall stretch vertically; midleft , midright anchors shall stretch horizontally. think might concern bounds anchors can move don't know how proceed.
http://jsfiddle.net/dppm7/3/ (sorry can't work in jsfiddle)..
the output looks this.
please if can help. :)
some code anchors (not codes middle anchors have been implemented):
// update positions of handles during drag. // needs happen dimension calculation can use // handle positions determine new width/height. switch (activehandlename) { case "topleft": topright.sety(activehandle.gety()); midright.sety(activehandle.gety()); midtop.sety(activehandle.gety()); bottomleft.setx(activehandle.getx()); midleft.setx(activehandle.getx()); midbottom.setx(activehandle.getx()); break; case "topright": topleft.sety(activehandle.gety()); midleft.sety(activehandle.gety()); midtop.sety(activehandle.gety()); bottomright.setx(activehandle.getx()); midbottom.setx(activehandle.getx()); midright.setx(activehandle.getx()); break; case "bottomright": bottomleft.sety(activehandle.gety()); midbottom.sety(activehandle.gety()); midleft.sety(activehandle.gety()); topright.setx(activehandle.getx()); midtop.setx(activehandle.getx()); midright.setx(activehandle.getx()); break; case "bottomleft": bottomright.sety(activehandle.gety()); midbottom.sety(activehandle.gety()); midright.sety(activehandle.gety()); topleft.setx(activehandle.getx()); midtop.setx(activehandle.getx()); midleft.setx(activehandle.getx()); break; case "midtop": topright.sety(activehandle.gety()); topleft.sety(activehandle.gety()); midright.sety(activehandle.gety()); midleft.sety(activehandle.gety()); break; case "midbottom": bottomright.sety(activehandle.gety()); bottomleft.sety(activehandle.gety()); midright.sety(activehandle.gety()); midleft.sety(activehandle.gety()); break; case "midright": topright.setx(activehandle.getx()); bottomright.setx(activehandle.getx()); midtop.setx(activehandle.getx()); midbottom.setx(activehandle.getx()); break; case "midleft": topleft.setx(activehandle.getx()); bottomleft.setx(activehandle.getx()); midtop.setx(activehandle.getx()); midbottom.setx(activehandle.getx()); break; } // calculate new dimensions. height dy of handles. // width increased/decreased factor of how height changed. newheight = bottomleft.gety() - topleft.gety(); newwidth = image.getwidth() * newheight / image.getheight(); // move image adjust new dimensions. // position calculation changes depending on anchored. // ie. when dragging on right, anchored top left, // when dragging on left, anchored top right. if (activehandlename === "topright" || activehandlename === "bottomright") { image.setposition(topleft.getx(), topleft.gety()); } else if (activehandlename === "topleft" || activehandlename === "bottomleft") { image.setposition(topright.getx() - newwidth, topright.gety()); } imagex = image.getx(); imagey = image.gety(); // update handle positions reflect new image dimensions topleft.setposition(imagex, imagey); topright.setposition(imagex + newwidth, imagey); bottomright.setposition(imagex + newwidth, imagey + newheight); bottomleft.setposition(imagex, imagey + newheight); midtop.setposition(imagex + image.getwidth() / 2, imagey); midbottom.setposition(imagex + image.getwidth() / 2, imagey + newheight); midright.setposition(imagex + image.getwidth(), imagey + image.getheight() / 2); midleft.setposition(imagex, imagey + image.getheight() / 2); // set image's size newly calculated dimensions if (newwidth && newheight) { image.setsize(newwidth, newheight); } }
<script> var imwidth; var imheight; var topright; var topleft; var bottomleft; var width; var height; var group; var bottomright; var image; var aspectratio; var oldwidth; var oldheight; var oldtopleftx; var oldtoplefty; var shrinklimitbound; function update(activeanchor) { group = activeanchor.getparent(); var anchorx = activeanchor.getx(); var anchory = activeanchor.gety(); actratio=imwidth/imheight; shrinklimitbound=100; height=bottomleft.gety() - topleft.gety(); width=topright.getx() - topleft.getx(); newratio=(width)/(height); width=actratio*height; switch (activeanchor.getname()) { case 'topleft': if(height<shrinklimitbound) { height=shrinklimitbound; width=actratio*height;; topright.sety(bottomright.gety()-height); } else { if(anchory < bottomright.gety()) topright.sety(anchory); else topright.sety(bottomright.gety()-height); } topright.setx(bottomright.getx()); bottomleft.setx(bottomright.getx()-width); bottomleft.sety(bottomright.gety()); topleft.setx(bottomright.getx()-width); topleft.sety(bottomright.gety()-height); break; case 'topright': if(height<shrinklimitbound) { height=shrinklimitbound; width=actratio*height;; topleft.sety(bottomleft.gety()-height); } else { if(anchory < bottomleft.gety()-shrinklimitbound) { topleft.sety(anchory) } else { topleft.sety(bottomleft.gety()-height); } } topleft.setx(bottomleft.getx()); bottomright.setx(bottomleft.getx()+width); bottomright.sety(bottomleft.gety()); topright.setx(bottomleft.getx()+width); topright.sety(bottomleft.gety()-height); break; case 'bottomright': if(height<shrinklimitbound) { height=shrinklimitbound; width=actratio*height;; bottomleft.sety(topleft.gety()+height); } else { if(anchory > topleft.gety()+shrinklimitbound) { bottomleft.sety(anchory); } else bottomleft.sety(topleft.gety()+height); } bottomleft.setx(topleft.getx()); topright.setx(topleft.getx()+width); topright.sety(topleft.gety()); bottomright.setx(topleft.getx()+width); bottomright.sety(topleft.gety()+height); break; case 'bottomleft': if(height<shrinklimitbound) { height=shrinklimitbound; width=actratio*height;; bottomright.sety(topright.gety()+height); } else { if(anchory > topright.gety()) bottomright.sety(anchory); else bottomright.sety(topright.gety()+height); } bottomright.setx(topright.getx()); topleft.setx(topright.getx()-width); topleft.sety(topright.gety()); bottomleft.setx(topright.getx()-width); bottomleft.sety(topleft.gety()+height); break; } image.setposition(topleft.getposition()); if(width>0 && height>0) { image.setsize(width,height); } oldwidth=width; oldheight=height; oldtopleftx=topleft.getx(); oldtoplefty=topleft.gety(); } function addanchor(group, x, y, name) { var stage = group.getstage(); var layer = group.getlayer(); var anchor = new kinetic.circle({ x: x, y: y, stroke: '#666', fill: '#ddd', strokewidth: 0, radius: 4, name: name, draggable: true, dragontop: false }); anchor.on('dragmove', function() { update(this); layer.draw(); }); anchor.on('mousedown touchstart', function() { group.setdraggable(false); this.movetotop(); }); anchor.on('dragend', function() { group.setdraggable(true); layer.draw(); }); // add hover styling anchor.on('mouseover', function() { var layer = this.getlayer(); document.body.style.cursor = 'pointer'; this.setstrokewidth(4); layer.draw(); }); anchor.on('mouseout', function() { var layer = this.getlayer(); document.body.style.cursor = 'default'; this.setstrokewidth(2); layer.draw(); }); group.add(anchor); } function loadimages(sources, callback) { var images = {}; var loadedimages = 0; var numimages = 0; for(var src in sources) { numimages++; } for(var src in sources) { images[src] = new image(); images[src].onload = function() { if(++loadedimages >= numimages) { callback(images); } }; images[src].src = sources[src]; } } function initstage(images) { var conwidth = 578; //container width. var conheight = 400; //container heitgh. imwidth = images.dresstrailimage.width; imheight = images.dresstrailimage.height; if (imwidth > conwidth) { imheight = (imheight/imwidth)*conwidth; imwidth = conwidth; } if (imheight > conheight) { imwidth = (imwidth/imheight)*conheight; imheight = conheight; } if ((imheight < conheight) && (imwidth < conwidth)) { var diffx = conwidth - imwidth; var diffy = conheight - imheight; var diffy2 = (imheight/imwidth)*diffx; if (diffy2 > diffy) { imwidth = (imwidth/imheight)*conheight; imheight = conheight; } else { imheight = (imheight/imwidth)*conwidth; imwidth = conwidth; } } images.usrtrail.width = imwidth; images.usrtrail.height = imheight; var stage = new kinetic.stage({ container: 'container', width: imwidth, height: imheight }); var dresstrailimagegroup = new kinetic.group({ x: 0, y: 0, draggable: true, //dragboundfunc: function(pos) { // console.log(pos); // // var newx; // // var newy; // console.log(topleft.x+","+bottomright.y); // x1=topleft.x; // x2=bottomright.x; // y1=topleft.y; // y2=bottomright.y; // x=pos.x; // y=pos.y; // var calsign = ((x-x1)*(y-y2))-((y-y1)*(x-x2)) // if (calsign < 0){ // return { // x : pos.x, // y : pos.y // } // }else { // return { // x : 50, // y : 50 // } // } //} // if (pos.x < ){ // newx=10; // } // else if ((pos.x+dresstrailimage.getwidth()) > stage.getwidth()-50){ // newx = stage.getwidth()-dresstrailimage.getwidth()-50; // } // else{ // newx = pos.x; // }; // if(pos.y < 10){ // newy = 10; // } // else if((pos.y + dresstrailimage.getheight()) > stage.getheight()-50){ // newy = stage.getheight()-dresstrailimage.getheight()-50; // } // else { // newy = pos.y; // } //console.log("newx:"+newx+", newy:"+newy); // return { // x : newx, // y : newy, // }; //} }); // usrtrail var usrtrailimg = new kinetic.image({ x: 0, y: 0, image: images.usrtrail, width: images.usrtrail.width, height: images.usrtrail.height, name: 'image' }); var layer = new kinetic.layer(); /* * go ahead , add groups * layer , layer * stage groups have knowledge * of layer , stage */ layer.add(dresstrailimagegroup); layer.add(usrtrailimg); stage.add(layer); usrtrailimg.movetobottom(); intialaspratio = images.dresstrailimage.width/images.dresstrailimage.height; console.log("aspectratio :"+intialaspratio); // dress trail image var inith=200; //set desired height of dress shows var initw=intialaspratio*inith; var neck_user_x=50;//from backend var neck_user_y=20;//from backend var neck_dress_x=50;//from backend var neck_dress_y=5;//from backend //for getting actual width , height of user's image var usrimgobjactual= new image(); usrimgobjactual.src=sources.usrtrail; usrimgwidth=usrimgobjactual.width; usrimgheight=usrimgobjactual.height; ////////////////////////////////////////// // var usrimgwidth= 180; // var usrimgheight=270; console.log("height should 270 , is:"+usrimgheight); console.log("width should 180 , is:"+usrimgwidth); var dressimgwidth=initw; var dressimgheight=inith; console.log("usertrail image width adn height"+images.usrtrail.width+"::"+images.usrtrail.height); console.log("neck user , dress resp"+neck_user_x+","+neck_user_y+','+neck_dress_x+','+neck_dress_y); var x_draw=((neck_user_x*usrimgwidth)-(neck_dress_x*dressimgwidth)); var y_draw=((neck_user_y*usrimgheight)-(neck_dress_y*dressimgheight)); x_draw=x_draw/100; y_draw=y_draw/100; console.log("xdraw , ydraw:"+x_draw+','+y_draw); //top left corner coordinates of dress image. var initx=x_draw; var inity=y_draw; var dresstrailimage = new kinetic.image({ x: initx, y: inity, image: images.dresstrailimage, name: 'image', width: initw,// images.dresstrailimage.width, height: inith //images.dresstrailimage.height }); // dresstrailimage.width = 50; // dresstrailimage.height = dresstrailimage.width / intialaspratio; // console.log(dresstrailimage.height); dresstrailimagegroup.add(dresstrailimage); addanchor(dresstrailimagegroup, initx , inity, 'topleft'); addanchor(dresstrailimagegroup, initx + initw , inity , 'topright'); addanchor(dresstrailimagegroup, initx + initw , inity + inith, 'bottomright'); addanchor(dresstrailimagegroup, initx , inity + inith, 'bottomleft'); topleft = dresstrailimagegroup.get('.topleft')[0]; topright = dresstrailimagegroup.get('.topright')[0]; bottomright = dresstrailimagegroup.get('.bottomright')[0]; bottomleft = dresstrailimagegroup.get('.bottomleft')[0]; image = dresstrailimagegroup.get('.image')[0]; dresstrailimagegroup.on('dragstart', function() { this.movetotop(); }); stage.draw(); } var sources = { dresstrailimage: "http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg", usrtrail: "http://www.html5canvastutorials.com/demos/assets/yoda.jpg" }; loadimages(sources, initstage); //function called on clicking submit button. function sunmit_fn(){ //neck positions of trail dress in percentages (assumed now!). neckdressx=50;//in percentage. neckdressy=5;//in percentage. //height , width of user image used in canvas. //original here here refered height , width used in canavs var originaluserimgwidth = imwidth; var originaluserimgheight = imheight; var traildresswidth = image.getwidth();//final image width var traildressheight = image.getheight();//final image height imagex=topleft.getparent().getx()+topleft.getx()+1;//upper right anchor x position imagey=topleft.getparent().gety()+topleft.gety()+1;//upper right anchor y position //formula calculating final neck positions of resized , dragged dress //with respect user image in percentages neckfinalx=(imagex+(traildresswidth*(neckdressx/100)))/originaluserimgwidth; neckfinaly=(imagey+(traildressheight*(neckdressy/100)))/originaluserimgheight; //neck in percentages trail pic neck x,y. neckfinalx=neckfinalx*100; neckfinaly=neckfinaly*100; //just testing. console.log("neck position updated user:"); console.log("x:"+neckfinalx+", y:"+neckfinaly+")"); console.log("resized size of dress is:"); console.log("width:"+traildresswidth+", height:"+traildressheight); } </script> this script resizes along 1 axis 4 points.you can figure out same points
Comments
Post a Comment