TypeScript/JavaScript image rotation and resize -
i have requirement have rotate , resize image using typescript (or javascript also, since using angular2). image rotation , resizing feature similar ms outlook (when compose mail , add images in body of mail).
i able resize , rotate separately need 1 combined feature below , feel.
var minwidth = 60; var minheight = 40; // thresholds var margins = 4; // end of what's configurable. var clicked = null; var onrightedge, onbottomedge, onleftedge, ontopedge; var b, x, y; var redraw = false; var pane = document.getelementbyid('pane'); var e; // mouse events pane.addeventlistener('mousedown', onmousedown); document.addeventlistener('mousemove', onmove); document.addeventlistener('mouseup', onup); // touch events pane.addeventlistener('touchstart', ontouchdown); document.addeventlistener('touchmove', ontouchmove); document.addeventlistener('touchend', ontouchend); function ontouchdown(e) { ondown(e.touches[0]); e.preventdefault(); } function ontouchmove(e) { onmove(e.touches[0]); } function ontouchend(e) { if (e.touches.length ==0) onup(e.changedtouches[0]); } function onmousedown(e) { ondown(e); e.preventdefault(); } function onmove(ee) { calc(ee); e = ee; redraw = true; } function onup(e) { calc(e); clicked = null; } function ondown(e) { calc(e); var isresizing = onrightedge || onbottomedge || ontopedge || onleftedge; console.log("isresizing: " + isresizing); clicked = { x: x, y: y, cx: e.clientx, cy: e.clienty, w: b.width, h: b.height, isresizing: isresizing, ontopedge: ontopedge, onleftedge: onleftedge, onrightedge: onrightedge, onbottomedge: onbottomedge }; } function animate() { requestanimationframe(animate); if (!redraw) return; redraw = false; if (clicked && clicked.isresizing) { if (clicked.onrightedge) pane.style.width = math.max(x, minwidth) + 'px'; if (clicked.onbottomedge) pane.style.height = math.max(y, minheight) + 'px'; if (clicked.onleftedge) { var currentwidth = math.max(clicked.cx - e.clientx + clicked.w, minwidth); if (currentwidth > minwidth) { pane.style.width = currentwidth + 'px'; pane.style.left = e.clientx + 'px'; } } if (clicked.ontopedge) { var currentheight = math.max(clicked.cy - e.clienty + clicked.h, minheight); if (currentheight > minheight) { pane.style.height = currentheight + 'px'; pane.style.top = e.clienty + 'px'; } } return; } // code executes when mouse moves without clicking // style cursor if (onrightedge && onbottomedge || onleftedge && ontopedge) { pane.style.cursor = 'nwse-resize'; } else if (onrightedge && ontopedge || onbottomedge && onleftedge) { pane.style.cursor = 'nesw-resize'; } else if (onrightedge || onleftedge) { pane.style.cursor = 'ew-resize'; } else if (onbottomedge || ontopedge) { pane.style.cursor = 'ns-resize'; } else { pane.style.cursor = 'default'; } } function calc(e) { b = pane.getboundingclientrect(); x = e.clientx - b.left; y = e.clienty - b.top; ontopedge = y < margins; onleftedge = x < margins; onrightedge = x >= b.width - margins; onbottomedge = y >= b.height - margins; } animate(); var count = 0; $(".btn-rotate").on("click",function(){ if(count == 0){ $("#pane").css("transform","rotate(90deg)"); count++; } else if (count == 1){ $("#pane").css("transform","rotate(180deg)"); count++; } else if (count == 2){ $("#pane").css("transform","rotate(270deg)"); count++; } else { $("#pane").css("transform","rotate(360deg)"); count=0; } });#pane { position: absolute; top: 150px; left:200px; } img{ width:100px; height: 100px; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <body> <h1> can resize image hovering on edges , drag </h1> <img src="https://www.bleedingcool.com/wp-content/uploads/2014/10/dc-logo.png" id="pane" height="100px" width="100px"/> <button class="btn-rotate"> rotate me </button> </body>
Comments
Post a Comment