WebDev/VersaWhiteboard
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

fix rotation also add rotation for bg layer images

Browse Source
This commit is contained in:
raphael 2020-05-22 21:25:20 +02:00
parent e84189d9d8
commit 8a94293635
2 changed files with 48 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/js/main.js
View File

@ -571,6 +571,9 @@ function initWhiteboard() {
headercolor: "#0082c9", headercolor: "#0082c9",
}); });
// render newly added icons
dom.i2svg();
showPDFPageAsImage(1); showPDFPageAsImage(1);
function showPDFPageAsImage(pageNumber) { function showPDFPageAsImage(pageNumber) {
// Fetch the page // Fetch the page

61
src/js/whiteboard.js
View File

@ -118,7 +118,7 @@ const whiteboard = {
this.ctx = this.canvas.getContext("2d"); this.ctx = this.canvas.getContext("2d");
this.oldGCO = this.ctx.globalCompositeOperation; this.oldGCO = this.ctx.globalCompositeOperation;
$(window).resize(function () { window.addEventListener("resize", function () {
// Handel resize // Handel resize
const dbCp = JSON.parse(JSON.stringify(_this.drawBuffer)); // Copy the buffer const dbCp = JSON.parse(JSON.stringify(_this.drawBuffer)); // Copy the buffer
_this.canvas.width = $(window).width(); _this.canvas.width = $(window).width();
@ -773,34 +773,39 @@ const whiteboard = {
imgDiv.remove(); imgDiv.remove();
_this.setTool(oldTool); _this.setTool(oldTool);
}); });
var rotationAngle = 0;
var recoupLeft = 0;
var recoupTop = 0;
var p = imgDiv.position();
var left = 200;
var top = 200;
imgDiv.find(".addToCanvasBtn,.addToBackgroundBtn").click(function () { imgDiv.find(".addToCanvasBtn,.addToBackgroundBtn").click(function () {
var draw = $(this).attr("draw"); var draw = $(this).attr("draw");
_this.imgDragActive = false; _this.imgDragActive = false;
_this.refreshCursorAppearance();
var width = imgDiv.width(); var width = imgDiv.width();
var height = imgDiv.height(); var height = imgDiv.height();
var p = imgDiv.position();
var left = Math.round(p.left * 100) / 100;
var top = Math.round(p.top * 100) / 100;
if (draw == "1") { if (draw == "1") {
//draw image to canvas //draw image to canvas
_this.drawImgToCanvas(url, width, height, left, top); _this.drawImgToCanvas(url, width, height, left, top, rotationAngle);
} else { } else {
//Add image to background //Add image to background
_this.drawImgToBackground(url, width, height, left, top); _this.drawImgToBackground(url, width, height, left, top, rotationAngle);
} }
_this.sendFunction({ _this.sendFunction({
t: "addImgBG", t: "addImgBG",
draw: draw, draw: draw,
url: url, url: url,
d: [width, height, left, top], d: [width, height, left, top, rotationAngle],
}); });
_this.drawId++; _this.drawId++;
imgDiv.remove(); imgDiv.remove();
_this.refreshCursorAppearance();
_this.setTool(oldTool); _this.setTool(oldTool);
}); });
_this.mouseOverlay.append(imgDiv); _this.mouseOverlay.append(imgDiv);
var recoupLeft, recoupTop;
imgDiv.draggable({ imgDiv.draggable({
start: function (event, ui) { start: function (event, ui) {
var left = parseInt($(this).css("left"), 10); var left = parseInt($(this).css("left"), 10);
@ -814,15 +819,23 @@ const whiteboard = {
ui.position.left += recoupLeft; ui.position.left += recoupLeft;
ui.position.top += recoupTop; ui.position.top += recoupTop;
}, },
stop: function (event, ui) {
left = ui.position.left;
top = ui.position.top;
},
}); });
imgDiv.resizable(); imgDiv.resizable();
var params = { var params = {
// Callback fired on rotation start. // Callback fired on rotation start.
start: function (event, ui) {}, start: function (event, ui) {},
// Callback fired during rotation. // Callback fired during rotation.
rotate: function (event, ui) {}, rotate: function (event, ui) {
//console.log(ui)
},
// Callback fired on rotation end. // Callback fired on rotation end.
stop: function (event, ui) {}, stop: function (event, ui) {
rotationAngle = ui.angle.current;
},
handle: imgDiv.find(".rotationHandle"), handle: imgDiv.find(".rotationHandle"),
}; };
imgDiv.rotatable(params); imgDiv.rotatable(params);
@ -830,7 +843,7 @@ const whiteboard = {
// render newly added icons // render newly added icons
dom.i2svg(); dom.i2svg();
}, },
drawImgToBackground(url, width, height, left, top) { drawImgToBackground(url, width, height, left, top, rotationAngle) {
this.imgContainer.append( this.imgContainer.append(
'<img crossorigin="anonymous" style="width:' + '<img crossorigin="anonymous" style="width:' +
width + width +
@ -840,7 +853,9 @@ const whiteboard = {
top + top +
"px; left:" + "px; left:" +
left + left +
'px;" src="' + "px; transform: rotate(" +
rotationAngle +
'rad);" src="' +
url + url +
'">' '">'
); );
@ -953,11 +968,17 @@ const whiteboard = {
.find(".textContent") .find(".textContent")
.css({ color: color }); .css({ color: color });
}, },
drawImgToCanvas(url, width, height, left, top, doneCallback) { drawImgToCanvas(url, width, height, left, top, rotationAngle, doneCallback) {
var _this = this; var _this = this;
var img = document.createElement("img"); var img = document.createElement("img");
img.onload = function () { img.onload = function () {
_this.ctx.drawImage(img, left, top, width, height); rotationAngle = rotationAngle ? rotationAngle : 0;
_this.ctx.save();
_this.ctx.translate(left + width / 2, top + height / 2);
_this.ctx.rotate(rotationAngle);
_this.ctx.drawImage(img, -(width / 2), -(height / 2), width, height);
_this.ctx.restore();
//_this.ctx.drawImage(img, left, top, width, height);
if (doneCallback) { if (doneCallback) {
doneCallback(); doneCallback();
} }
@ -1111,10 +1132,18 @@ const whiteboard = {
data[1], data[1],
data[2], data[2],
data[3], data[3],
data[4],
doneCallback doneCallback
); );
} else { } else {
_this.drawImgToBackground(content["url"], data[0], data[1], data[2], data[3]); _this.drawImgToBackground(
content["url"],
data[0],
data[1],
data[2],
data[3],
data[4]
);
} }
} else if (tool === "addTextBox") { } else if (tool === "addTextBox") {
_this.addTextBox(data[0], data[1], data[2], data[3], data[4]); _this.addTextBox(data[0], data[1], data[2], data[3], data[4]);