raphael/whiteboard
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Basic implemantation for draw img

Browse Source
This commit is contained in:
Matthieu Borgognon 2022-10-31 08:51:06 +01:00
parent aca566b5f4
commit 11adbcf730
1 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/js/whiteboard.js
View File

@ -904,7 +904,7 @@ const whiteboard = {
if (draw == "1") { if (draw == "1") {
//draw image to canvas //draw image to canvas
_this.drawImgToCanvas(finalURL, width, height, left, top, rotationAngle); _this.drawImgToCanvas(finalURL, width, height, left - _this.viewCoords.x, top - _this.viewCoords.y, rotationAngle);
} else { } else {
//Add image to background //Add image to background
_this.drawImgToBackground(finalURL, width, height, left, top, rotationAngle); _this.drawImgToBackground(finalURL, width, height, left, top, rotationAngle);
@ -936,8 +936,8 @@ const whiteboard = {
ui.position.top += recoupTop; ui.position.top += recoupTop;
}, },
stop: function (event, ui) { stop: function (event, ui) {
left = ui.position.left; left = ui.position.left - _this.viewCoords.x;
top = ui.position.top; top = ui.position.top - _this.viewCoords.y;
}, },
}); });
imgDiv.resizable(); imgDiv.resizable();
@ -1139,10 +1139,10 @@ const whiteboard = {
img.onload = function () { img.onload = function () {
rotationAngle = rotationAngle ? rotationAngle : 0; rotationAngle = rotationAngle ? rotationAngle : 0;
if (rotationAngle === 0) { if (rotationAngle === 0) {
_this.ctx.drawImage(img, left, top, width, height); _this.ctx.drawImage(img, left + _this.viewCoords.x, top + _this.viewCoords.y, width, height);
} else { } else {
_this.ctx.save(); _this.ctx.save();
_this.ctx.translate(left + width / 2, top + height / 2); _this.ctx.translate(left + _this.viewCoords.x + width / 2, top + _this.viewCoords.y + height / 2);
_this.ctx.rotate(rotationAngle); _this.ctx.rotate(rotationAngle);
_this.ctx.drawImage(img, -(width / 2), -(height / 2), width, height); _this.ctx.drawImage(img, -(width / 2), -(height / 2), width, height);
_this.ctx.restore(); _this.ctx.restore();