Προσπάθησα να χρησιμοποιήσω τη συνάρτηση drawImage του καμβά.
Στην τεκμηρίωση (http://msdn.microsoft.com/en-us/library/ie/ff975414(v=vs.85).aspx) Νόμιζα ότι οι δύο τελευταίες παράμετροι είναι το σημείο προορισμού, αλλά υποθέτω ότι δεν είναι επειδή δεν λειτουργεί.
Υπάρχει τρόπος να σχεδιάσετε εικόνα ανάμεσα σε δύο σημεία χωρίς να την περιστρέψετε ή κάτι τέτοιο;
Ευχαριστώ!
drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight). Τα δύο τελευταία είναι το πλάτος και το ύψος προορισμού. 28.09.2014 context.drawImage(
sourceImage,
sourceX, sourceY, sourceWidthToClip, sourceHeightToClip,
canvasX, canvasY, scaledWidth, scaledHeight );
Στο context.drawImage η πρώτη παράμετρος είναι η εικόνα πηγής.
Οι επόμενες 4 παράμετροι είναι η ορθογώνια υποεικόνα x, y, πλάτος και ύψος που θα αποκοπεί από αυτήν την πηγή
Οι τελευταίες 4 παράμετροι είναι το x, y, scaledWidth & scaledHeight ορθογώνια κλιμακούμενη εικόνα για σχεδίαση στον καμβά.
Σχολιασμένη εικόνα σχεδίασης:
context.drawImage(
sourceImage, // the source image to clip from
sX, // the left X position to start clipping
sY, // the top Y position to start clipping
sW, // clip this width of pixels from the source
wH, // clip this height of pixels from the source
dX, // the left X canvas position to start drawing the clipped sub-image
dY, // the top Y canvas position to start drawing the clipped sub-image
dW, // scale sW to dW and draw a dW wide sub-image on the canvas
dH // scale sH to dH and draw a dH high sub-image on the canvas
}
Οπτική εικόνα σχεδίασης:
![εισαγάγετε την περιγραφή της εικόνας εδώ][1]
Παράδειγμα κώδικα για drawImage:
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var canvas1=document.getElementById("drawImage");
var ctx1=canvas1.getContext("2d");
var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/avatars.jpg";
function start(){
canvas.width=img.width;
canvas.height=img.height;
ctx.drawImage(img,0,0);
var scale=2;
canvas1.width=471/5*3;
canvas1.height=255/2*3;
ctx1.drawImage(img,
94,0,94,120,
50,50,94*scale,120*scale
);
}body{ background-color: ivory; padding:10px; }
canvas{border:1px solid red;}<h4>The original image</h4>
<canvas id="canvas" width=300 height=300></canvas><br>
<h4>The clipped & scaled sub-image drawn into the canvas</h4>
<canvas id="drawImage" width=300 height=300></canvas>Παράδειγμα εικονογράφησης για drawImage:
[ Προσθήκη: Τρόπος ελέγχου dx,dy με στοιχεία ελέγχου εύρους html ]
var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var canvas1=document.getElementById("drawImage");
var ctx1=canvas1.getContext("2d");
var $dx=$('#dx');
var $dy=$('#dy');
var scale=2;
var img=new Image();
img.onload=start;
img.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/avatars.jpg";
function start(){
canvas.width=img.width;
canvas.height=img.height;
ctx.drawImage(img,0,0);
canvas1.width=471/5*3;
canvas1.height=255/2*3;
draw();
$dx.change(function(){draw();});
$dy.change(function(){draw();});
}
function draw(){
ctx1.clearRect(0,0,canvas1.width,canvas1.height);
ctx1.drawImage(img,94,0,94,120,$dx.val(),$dy.val(),94*scale,120*scale);
}body{ background-color: ivory; padding:10px; }
canvas{border:1px solid red;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>The original image</h4>
<canvas id="canvas" width=300 height=300></canvas><br>
<h4>The clipped & scaled sub-image drawn into the canvas</h4>
dx:<input id=dx type=range min=0 max=280 value=0><br>
dy:<input id=dy type=range min=0 max=380 value=0><br>
<canvas id="drawImage" width=300 height=300></canvas>
