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

fix local draw

Browse Source
This commit is contained in:
Raphael 2022-06-11 18:38:17 +02:00
parent 92705e55ce
commit f8046e1b59
1 changed files with 14 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/js/whiteboard.js
View File

@ -244,12 +244,10 @@ const whiteboard = {
_this.ctx.globalCompositeOperation = _this.oldGCO; _this.ctx.globalCompositeOperation = _this.oldGCO;
let currentPos = Point.fromEvent(e); let currentPos = Point.fromEvent(e);
if (_this.tool !== "hand") { // if (_this.tool !== "hand") {
console.log(currentPos.x, currentPos.y, _this.viewCoords.x, _this.viewCoords.y); // currentPos.x += _this.viewCoords.x;
currentPos.x += _this.viewCoords.x; // currentPos.y += _this.viewCoords.y;
currentPos.y += _this.viewCoords.y; // }
console.log(currentPos.x, currentPos.y);
}
if (currentPos.isZeroZero) { if (currentPos.isZeroZero) {
_this.sendFunction({ _this.sendFunction({
t: "cursor", t: "cursor",
@ -499,12 +497,6 @@ const whiteboard = {
} }
let currentPos = Point.fromEvent(e); let currentPos = Point.fromEvent(e);
if (_this.tool !== "hand") {
console.log(currentPos.x, currentPos.y, _this.viewCoords.x, _this.viewCoords.y);
currentPos.x -= _this.viewCoords.x;
currentPos.y -= _this.viewCoords.y;
console.log(currentPos.x, currentPos.y);
}
window.requestAnimationFrame(function () { window.requestAnimationFrame(function () {
// update position // update position
@ -585,6 +577,8 @@ const whiteboard = {
}); });
ThrottlingService.throttle(currentPos, () => { ThrottlingService.throttle(currentPos, () => {
currentPos.x -= _this.viewCoords.x;
currentPos.y -= _this.viewCoords.y;
_this.lastPointerPosition = currentPos; _this.lastPointerPosition = currentPos;
_this.sendFunction({ _this.sendFunction({
t: "cursor", t: "cursor",
@ -720,7 +714,7 @@ const whiteboard = {
_this.ctx.stroke(); _this.ctx.stroke();
_this.ctx.closePath(); _this.ctx.closePath();
}, },
drawPenSmoothLine: function (coords, color, thickness) { drawPenSmoothLine: function (coords, color, thickness, remote) {
var _this = this; var _this = this;
var xm1 = coords[0]; var xm1 = coords[0];
var ym1 = coords[1]; var ym1 = coords[1];
@ -733,14 +727,16 @@ const whiteboard = {
var length = Math.sqrt(Math.pow(x0 - x1, 2) + Math.pow(y0 - y1, 2)); var length = Math.sqrt(Math.pow(x0 - x1, 2) + Math.pow(y0 - y1, 2));
var steps = Math.ceil(length / 5); var steps = Math.ceil(length / 5);
_this.ctx.beginPath(); _this.ctx.beginPath();
console.log(x0 + _this.viewCoords.x, y0 + _this.viewCoords.y); let xOffset = remote ? _this.viewCoords.x : 0;
_this.ctx.moveTo(x0 + _this.viewCoords.x, y0 + _this.viewCoords.y); let yOffset = remote ? _this.viewCoords.y : 0;
console.log(x0 + xOffset, y0 + yOffset);
_this.ctx.moveTo(x0 + xOffset, y0 + yOffset);
if (steps == 0) { if (steps == 0) {
_this.ctx.lineTo(x0 + _this.viewCoords.x, y0 + _this.viewCoords.y); _this.ctx.lineTo(x0 + xOffset, y0 + yOffset);
} }
for (var i = 0; i < steps; i++) { for (var i = 0; i < steps; i++) {
var point = lanczosInterpolate(xm1, ym1, x0, y0, x1, y1, x2, y2, (i + 1) / steps); var point = lanczosInterpolate(xm1, ym1, x0, y0, x1, y1, x2, y2, (i + 1) / steps);
_this.ctx.lineTo(point[0] + _this.viewCoords.x, point[1] + _this.viewCoords.y); _this.ctx.lineTo(point[0] + xOffset, point[1] + yOffset);
} }
_this.ctx.strokeStyle = color; _this.ctx.strokeStyle = color;
_this.ctx.lineWidth = thickness; _this.ctx.lineWidth = thickness;
@ -1240,7 +1236,7 @@ const whiteboard = {
//Only used for old json imports //Only used for old json imports
_this.drawPenLine(data[0], data[1], data[2], data[3], color, thickness); _this.drawPenLine(data[0], data[1], data[2], data[3], color, thickness);
} else { } else {
_this.drawPenSmoothLine(data, color, thickness); _this.drawPenSmoothLine(data, color, thickness, true);
} }
} else if (tool === "rect") { } else if (tool === "rect") {
_this.drawRec(data[0], data[1], data[2], data[3], color, thickness); _this.drawRec(data[0], data[1], data[2], data[3], color, thickness);