दिलचस्प पोस्ट
उद्देश्य-सी / सी में संख्या / फ्लोट के बाद "f" रेल 2: Model.find (1) ActiveRecord त्रुटि देता है जब आईडी 1 मौजूद नहीं है एपीआई कार्यान्वित करते समय मैं ब्लॉकों में स्वयं कैप्चर कैसे करूँ? स्थानीय सिस्टम खाते के अंतर्गत आप CMD.exe कैसे चला सकते हैं? कंस्ट्रक्टर में यह अजीब कोलोन-सदस्य (":") वाक्यविन्यास क्या है? निष्पादन योग्य का पथ प्राप्त करें विभिन्न पृष्ठभूमि रंगों के साथ दो कॉलम प्राप्त करें जो कि स्क्रीन किनारे तक बढ़तें मेरे इनलाइन ब्लॉक तत्वों को ठीक से नहीं चल रहा है Chrome में मुद्रण करते समय href मान को निकालना आवश्यक है निमंत्रण या BeginInvoke को एक नियंत्रण पर नहीं बुलाया जा सकता जब तक विंडो हैंडल नहीं बनाया गया हो JSONObject पर पुनरावृति कैसे करें? पैरामीलेटेड एसक्यूएल क्वेरी को वैरिएबल में डालें और फिर पायथन में कैसे निष्पादित करें? कॉलम में एक सीएसएस वर्ग जोड़ना MySQL दिनांक स्वरूप डीडी / एमएम / वाई वाई वाई वाई क्वेरी का चयन करें? पायथन में हेक्स स्ट्रिंग को int में परिवर्तित करें

एचटीएमएल 5 कैनवास पर एक छवि खींचकर रीसाइज करना

मैं एक HTML5 कैनवास छवि संपादक का निर्माण कर रहा हूं। कैनवास में एक छवि अपलोड करने के बाद मुझे ड्रैग और कैनवास पर इसका आकार बदलना होगा। मैंने एक छवि अपलोड करने और कैनवास पर इसे खींचने में कामयाब रहा। लेकिन मुझे इसे कैनवास के साथ भी पुन: आकार देने की ज़रूरत है अग्रिम में धन्यवाद।

var Img = new Image(); Img.src = file; Img.onload = function () { context.drawImage(Img, 50, 0, 200, 200); } mouseMove = function (event){ if (down) { context.clearRect(0,0,800,500); context.translate(0, -50); context.drawImage(Img, (event.clientX - offsetX), (event.clientY - offsetY), 200, 200); context.translate(0, 50); } } mouseUp = function () { down = false; } mouseDown = function () { down = true; } canvas.addEventListener('mousedown', mouseDown, false); canvas.addEventListener('mouseup', mouseUp, false); canvas.addEventListener('mousemove',mouseMove, false); 

मैंने कैनेटीक्स जेएस के साथ की कोशिश की लेकिन यह कैनवास के साथ उपयुक्त नहीं है।

वेब के समाधान से एकत्रित समाधान "एचटीएमएल 5 कैनवास पर एक छवि खींचकर रीसाइज करना"

कैनवास का उपयोग करके एक छवि खींचने और उसका आकार बदलने की अनुमति देने के लिए यहां उदाहरण कोड दिया गया है।

पुन: आकार देने

यहां छवि विवरण दर्ज करेंयहां छवि विवरण दर्ज करें

4 ड्रैग करने योग्य एंकर के साथ एक छवि का आकार बदलने का तरीका

  • एक छवि के प्रत्येक कोने पर एक ड्रैग करने योग्य एंकर को खींचें।
  • यदि उपयोगकर्ता मूसुडाउन का एक है, तो एंकर, उस एंकर को खींचना शुरू करें
  • माउसमफे हैंडलर में, ड्रैगिंग एंकर की स्थिति (नोट नीचे) का उपयोग करके छवि का आकार बदलें।
  • माउसमफे में अंतिम कार्य के रूप में, पुनःआकारित छवि को दोहराएं और 4 नए एंकर।
  • Mouseup पर, लंगर खींचें रोकें

छवि का आकार बदलने के लिए गणित पर ध्यान दें:

  • पुनः आकारित चौड़ाई माउसएक्स स्थिति और विपरीत कोने के एक्स के बीच अंतर है।
  • पुनः आकार की ऊंचाई माउस की स्थिति और विपरीत कोने के वाई के बीच का अंतर है।

खींचना

यहां छवि विवरण दर्ज करेंयहां छवि विवरण दर्ज करें

कैसे एक छवि खींचें

  • यदि उपयोगकर्ता मस्जिद की छवि के अंदर है, तो ड्रैगिंग शुरू करने के लिए शुरू होने वाले मोसेस को बचाने के लिए XY करें।
  • माउसमफे हैंडलर में, वर्तमान माउसएक्सवाई शून्य से शुरुआती XY तक छवि को स्थानांतरित करें।
  • इसके अलावा, जारी रखा खींचने के लिए तैयारी में मौजूदा माउसएक्सवाई में आरंभिक XY को रीसेट करें।
  • Mouseup पर, छवि की खींचें रोकें

यहां कोड और फिल्ड है: http://jsfiddle.net/m1erickson/LAS8L/

 <!doctype html> <html> <head> <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> <style> body{ background-color: ivory; padding:10px;} #canvas{border:1px solid red;} </style> <script> $(function(){ var canvas=document.getElementById("canvas"); var ctx=canvas.getContext("2d"); var canvasOffset=$("#canvas").offset(); var offsetX=canvasOffset.left; var offsetY=canvasOffset.top; var startX; var startY; var isDown=false; var pi2=Math.PI*2; var resizerRadius=8; var rr=resizerRadius*resizerRadius; var draggingResizer={x:0,y:0}; var imageX=50; var imageY=50; var imageWidth,imageHeight,imageRight,imageBottom; var draggingImage=false; var startX; var startY; var img=new Image(); img.onload=function(){ imageWidth=img.width; imageHeight=img.height; imageRight=imageX+imageWidth; imageBottom=imageY+imageHeight draw(true,false); } img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/facesSmall.png"; function draw(withAnchors,withBorders){ // clear the canvas ctx.clearRect(0,0,canvas.width,canvas.height); // draw the image ctx.drawImage(img,0,0,img.width,img.height,imageX,imageY,imageWidth,imageHeight); // optionally draw the draggable anchors if(withAnchors){ drawDragAnchor(imageX,imageY); drawDragAnchor(imageRight,imageY); drawDragAnchor(imageRight,imageBottom); drawDragAnchor(imageX,imageBottom); } // optionally draw the connecting anchor lines if(withBorders){ ctx.beginPath(); ctx.moveTo(imageX,imageY); ctx.lineTo(imageRight,imageY); ctx.lineTo(imageRight,imageBottom); ctx.lineTo(imageX,imageBottom); ctx.closePath(); ctx.stroke(); } } function drawDragAnchor(x,y){ ctx.beginPath(); ctx.arc(x,y,resizerRadius,0,pi2,false); ctx.closePath(); ctx.fill(); } function anchorHitTest(x,y){ var dx,dy; // top-left dx=x-imageX; dy=y-imageY; if(dx*dx+dy*dy<=rr){ return(0); } // top-right dx=x-imageRight; dy=y-imageY; if(dx*dx+dy*dy<=rr){ return(1); } // bottom-right dx=x-imageRight; dy=y-imageBottom; if(dx*dx+dy*dy<=rr){ return(2); } // bottom-left dx=x-imageX; dy=y-imageBottom; if(dx*dx+dy*dy<=rr){ return(3); } return(-1); } function hitImage(x,y){ return(x>imageX && x<imageX+imageWidth && y>imageY && y<imageY+imageHeight); } function handleMouseDown(e){ startX=parseInt(e.clientX-offsetX); startY=parseInt(e.clientY-offsetY); draggingResizer=anchorHitTest(startX,startY); draggingImage= draggingResizer<0 && hitImage(startX,startY); } function handleMouseUp(e){ draggingResizer=-1; draggingImage=false; draw(true,false); } function handleMouseOut(e){ handleMouseUp(e); } function handleMouseMove(e){ if(draggingResizer>-1){ mouseX=parseInt(e.clientX-offsetX); mouseY=parseInt(e.clientY-offsetY); // resize the image switch(draggingResizer){ case 0: //top-left imageX=mouseX; imageWidth=imageRight-mouseX; imageY=mouseY; imageHeight=imageBottom-mouseY; break; case 1: //top-right imageY=mouseY; imageWidth=mouseX-imageX; imageHeight=imageBottom-mouseY; break; case 2: //bottom-right imageWidth=mouseX-imageX; imageHeight=mouseY-imageY; break; case 3: //bottom-left imageX=mouseX; imageWidth=imageRight-mouseX; imageHeight=mouseY-imageY; break; } // enforce minimum dimensions of 25x25 if(imageWidth<25){imageWidth=25;} if(imageHeight<25){imageHeight=25;} // set the image right and bottom imageRight=imageX+imageWidth; imageBottom=imageY+imageHeight; // redraw the image with resizing anchors draw(true,true); }else if(draggingImage){ imageClick=false; mouseX=parseInt(e.clientX-offsetX); mouseY=parseInt(e.clientY-offsetY); // move the image by the amount of the latest drag var dx=mouseX-startX; var dy=mouseY-startY; imageX+=dx; imageY+=dy; imageRight+=dx; imageBottom+=dy; // reset the startXY for next time startX=mouseX; startY=mouseY; // redraw the image with border draw(false,true); } } $("#canvas").mousedown(function(e){handleMouseDown(e);}); $("#canvas").mousemove(function(e){handleMouseMove(e);}); $("#canvas").mouseup(function(e){handleMouseUp(e);}); $("#canvas").mouseout(function(e){handleMouseOut(e);}); }); // end $(function(){}); </script> </head> <body> <p>Resize the image using the 4 draggable corner anchors</p> <p>You can also drag the image</p> <canvas id="canvas" width=350 height=350></canvas> </body> </html> 

इसके अलावा:

साइमन सर्रीस ने एचटीएमएल केनवास पर "एलीमेंट्स" को खींचने और फिर से कैसे बदलना है, यह एक अच्छी ट्यूटोरियल की है।

http://simonsarris.com/blog/225-canvas-selecting-resizing-shape