i know how can make box or image or whatever want resizeable, users can resize object how want to. know how can move these objects around page. id happy if tell me how make possible css , html.
thank you
this code want. html5, css, , javascript. can change liking. code in action: http://www.html5canvastutorials.com/demos/labs/html5-canvas-drag-and-drop-resize-and-invert-images/index.php
<!doctype html> <html> <head> <style> body { margin: 0px; padding: 0px; } </style> </head> <body onmousedown="return false;"> <div id="container"></div> <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.5.2.min.js"></script> <script> function update(activeanchor) { var group = activeanchor.getparent(); var topleft = group.get('.topleft')[0]; var topright = group.get('.topright')[0]; var bottomright = group.get('.bottomright')[0]; var bottomleft = group.get('.bottomleft')[0]; var image = group.get('.image')[0]; var anchorx = activeanchor.getx(); var anchory = activeanchor.gety(); // update anchor positions switch (activeanchor.getname()) { case 'topleft': topright.sety(anchory); bottomleft.setx(anchorx); break; case 'topright': topleft.sety(anchory); bottomright.setx(anchorx); break; case 'bottomright': bottomleft.sety(anchory); topright.setx(anchorx); break; case 'bottomleft': bottomright.sety(anchory); topleft.setx(anchorx); break; } image.setposition(topleft.getposition()); var width = topright.getx() - topleft.getx(); var height = bottomleft.gety() - topleft.gety(); if(width && height) { image.setsize(width, height); } } 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: 2, radius: 8, 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 stage = new kinetic.stage({ container: 'container', width: 578, height: 400 }); var darthvadergroup = new kinetic.group({ x: 270, y: 100, draggable: true }); var yodagroup = new kinetic.group({ x: 100, y: 110, draggable: true }); var layer = new kinetic.layer(); /* * go ahead , add groups * layer , layer * stage groups have knowledge * of layer , stage */ layer.add(darthvadergroup); layer.add(yodagroup); stage.add(layer); // darth vader var darthvaderimg = new kinetic.image({ x: 0, y: 0, image: images.darthvader, width: 200, height: 138, name: 'image' }); darthvadergroup.add(darthvaderimg); addanchor(darthvadergroup, 0, 0, 'topleft'); addanchor(darthvadergroup, 200, 0, 'topright'); addanchor(darthvadergroup, 200, 138, 'bottomright'); addanchor(darthvadergroup, 0, 138, 'bottomleft'); darthvadergroup.on('dragstart', function() { this.movetotop(); }); // yoda var yodaimg = new kinetic.image({ x: 0, y: 0, image: images.yoda, width: 93, height: 104, name: 'image' }); yodagroup.add(yodaimg); addanchor(yodagroup, 0, 0, 'topleft'); addanchor(yodagroup, 93, 0, 'topright'); addanchor(yodagroup, 93, 104, 'bottomright'); addanchor(yodagroup, 0, 104, 'bottomleft'); yodagroup.on('dragstart', function() { this.movetotop(); }); stage.draw(); } var sources = { darthvader: 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg', yoda: 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg' }; loadimages(sources, initstage); </script> </body> </html> 
Comments
Post a Comment