mirror of
https://github.com/Doodle3D/doodle3d-client.git
synced 2024-12-22 13:13:48 +01:00
Changes to how we draw to the canvas and how the preview is rendered. This has massive speedup results for tablets and phones.
This commit is contained in:
Adriaan Wormgoor
parent
aa82d6daa8
commit
ed8ceb7879
@ -118,16 +118,17 @@ function initButtonBehavior() {
|
||||
function startMoveUp(e) {
|
||||
e.preventDefault();
|
||||
// console.log("btnMoveUp mouse down");
|
||||
previewUp();
|
||||
previewUp(true);
|
||||
clearInterval(btnMoveUpInterval);
|
||||
btnMoveUpInterval = setInterval( function() {
|
||||
previewUp();
|
||||
previewUp(true);
|
||||
}, 1000/30);
|
||||
}
|
||||
function stopMoveUp(e) {
|
||||
e.preventDefault();
|
||||
console.log("btnMoveUp mouse up");
|
||||
clearInterval(btnMoveUpInterval);
|
||||
previewUp();
|
||||
}
|
||||
btnMoveUp.mousedown(function(e) { startMoveUp(e) });
|
||||
btnMoveUp.mouseup(function(e) { stopMoveUp(e) });
|
||||
@ -137,16 +138,17 @@ function initButtonBehavior() {
|
||||
function startMoveDown(e) {
|
||||
e.preventDefault();
|
||||
// console.log("btnMoveDown mouse down");
|
||||
previewDown();
|
||||
previewDown(true);
|
||||
clearInterval(btnMoveDownInterval);
|
||||
btnMoveDownInterval = setInterval( function() {
|
||||
previewDown();
|
||||
previewDown(true);
|
||||
}, 1000/30);
|
||||
}
|
||||
function stopMoveDown(e) {
|
||||
e.preventDefault();
|
||||
console.log("btnMoveDown mouse up");
|
||||
clearInterval(btnMoveDownInterval);
|
||||
previewDown();
|
||||
}
|
||||
btnMoveDown.mousedown(function(e) { startMoveDown(e) });
|
||||
btnMoveDown.mouseup(function(e) { stopMoveDown(e) });
|
||||
@ -156,16 +158,17 @@ function initButtonBehavior() {
|
||||
function startTwistLeft(e) {
|
||||
e.preventDefault();
|
||||
// console.log("btnTwistLeft mouse down");
|
||||
previewTwistLeft();
|
||||
previewTwistLeft(true);
|
||||
clearInterval(btnTwistLeftInterval);
|
||||
btnTwistLeftInterval = setInterval( function() {
|
||||
previewTwistLeft();
|
||||
previewTwistLeft(true);
|
||||
}, 1000/30);
|
||||
}
|
||||
function stopTwistLeft(e) {
|
||||
e.preventDefault();
|
||||
// console.log("btnTwistLeft mouse up");
|
||||
clearInterval(btnTwistLeftInterval);
|
||||
previewTwistLeft();
|
||||
}
|
||||
btnTwistLeft.mousedown(function(e) { startTwistLeft(e) });
|
||||
btnTwistLeft.mouseup(function(e) { stopTwistLeft(e) });
|
||||
@ -175,16 +178,17 @@ function initButtonBehavior() {
|
||||
function startTwistRight(e) {
|
||||
e.preventDefault();
|
||||
// console.log("btnTwistRight mouse down");
|
||||
previewTwistRight();
|
||||
previewTwistRight(true);
|
||||
clearInterval(btnTwistRightInterval);
|
||||
btnTwistRightInterval = setInterval( function() {
|
||||
previewTwistRight();
|
||||
previewTwistRight(true);
|
||||
}, 1000/30);
|
||||
}
|
||||
function stopTwistRight(e) {
|
||||
e.preventDefault();
|
||||
// console.log("btnTwistRight mouse up");
|
||||
clearInterval(btnTwistRightInterval);
|
||||
previewTwistLeft();
|
||||
}
|
||||
btnTwistRight.mousedown(function(e) { startTwistRight(e) });
|
||||
btnTwistRight.mouseup(function(e) { stopTwistRight(e) });
|
||||
@ -223,49 +227,56 @@ function initButtonBehavior() {
|
||||
btnStop.bind('touchstart mousedown',stopPrint);
|
||||
}
|
||||
function stopPrint() {
|
||||
printer.stop();
|
||||
console.log("f:stopPrint() >> sendPrintCommands = " + sendPrintCommands);
|
||||
if (sendPrintCommands) printer.stop();
|
||||
}
|
||||
|
||||
|
||||
function prevDoodle(e) {
|
||||
console.log("f:prevDoodle()");
|
||||
console.log("f:prevDoodle()");
|
||||
}
|
||||
function nextDoodle(e) {
|
||||
console.log("f:nextDoodle()");
|
||||
}
|
||||
|
||||
function print(e) {
|
||||
console.log("f:print()");
|
||||
console.log("f:print() >> sendPrintCommands = " + sendPrintCommands);
|
||||
|
||||
$("#textdump").text("");
|
||||
if (_points.length > 2) {
|
||||
if (sendPrintCommands) {
|
||||
$("#textdump").text("");
|
||||
if (_points.length > 2) {
|
||||
|
||||
setState(PRINTING_STATE);
|
||||
var gcode = generate_gcode();
|
||||
//startPrint(gencode);
|
||||
printer.print(gcode);
|
||||
setState(PRINTING_STATE);
|
||||
var gcode = generate_gcode();
|
||||
//startPrint(gencode);
|
||||
printer.print(gcode);
|
||||
|
||||
// console.log("");
|
||||
// console.log("");
|
||||
// console.log("-------------------------------------------------");
|
||||
// console.log("generated gcode:");
|
||||
// console.log(gencode);
|
||||
// console.log("-------------------------------------------------");
|
||||
// console.log("");
|
||||
// console.log("");
|
||||
// console.log("");
|
||||
// console.log("");
|
||||
// console.log("");
|
||||
// console.log("-------------------------------------------------");
|
||||
// console.log("generated gcode:");
|
||||
// console.log(gencode);
|
||||
// console.log("-------------------------------------------------");
|
||||
// console.log("");
|
||||
// console.log("");
|
||||
// console.log("");
|
||||
|
||||
$("#textdump").text(gcode.join("\n"));
|
||||
// copyToClipboard(gencode);
|
||||
//*/
|
||||
} else {
|
||||
console.log("f:print >> not enough points!");
|
||||
}
|
||||
if (debugMode) $("#textdump").text(gcode.join("\n"));
|
||||
|
||||
// copyToClipboard(gencode);
|
||||
//*/
|
||||
} else {
|
||||
console.log("f:print >> not enough points!");
|
||||
}
|
||||
|
||||
|
||||
// $.post("/doodle3d.of", { data:output }, function(data) {
|
||||
// btnPrint.disabled = false;
|
||||
// });
|
||||
// $.post("/doodle3d.of", { data:output }, function(data) {
|
||||
// btnPrint.disabled = false;
|
||||
// });
|
||||
} else {
|
||||
console.log("sendPrintCommands is false: not sending print command to 3dprinter");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -288,33 +299,34 @@ function oopsUndo() {
|
||||
redrawDoodle();
|
||||
redrawPreview();
|
||||
}
|
||||
function previewUp() {
|
||||
function previewUp(redrawLess) {
|
||||
// console.log("f:previewUp()");
|
||||
if (numLayers < 100) {
|
||||
numLayers++;
|
||||
}
|
||||
redrawPreview();
|
||||
redrawPreview(redrawLess);
|
||||
}
|
||||
function previewDown() {
|
||||
function previewDown(redrawLess) {
|
||||
// console.log("f:previewDown()");
|
||||
if (numLayers > 2) {
|
||||
numLayers--;
|
||||
}
|
||||
redrawPreview();
|
||||
redrawPreview(redrawLess);
|
||||
}
|
||||
function previewTwistLeft() {
|
||||
function previewTwistLeft(redrawLess) {
|
||||
if (redrawLess == undefined) redrawLess = false;
|
||||
// console.log("f:previewTwistLeft()");
|
||||
// if (rStep < Math.PI) {
|
||||
rStep -= twistIncrement;
|
||||
// }
|
||||
redrawPreview();
|
||||
redrawPreview(redrawLess);
|
||||
}
|
||||
function previewTwistRight() {
|
||||
function previewTwistRight(redrawLess) {
|
||||
// console.log("f:previewTwistRight()");
|
||||
// if (rStep < Math.PI) {
|
||||
rStep += twistIncrement;
|
||||
// }
|
||||
redrawPreview();
|
||||
redrawPreview(redrawLess);
|
||||
}
|
||||
|
||||
|
||||
|
||||
@ -139,6 +139,9 @@ function clearDoodle() {
|
||||
prevX = 0;
|
||||
prevY = 0;
|
||||
|
||||
updatePrevX = -1;
|
||||
updatePrevY = -1;
|
||||
|
||||
doodleBounds = [-1, -1, -1, -1]; // left, top, right, bottom
|
||||
doodleTransform = [0, 0, 1.0, 1.0]; // [ x, y, scaleX, scaleY ]
|
||||
|
||||
@ -165,6 +168,7 @@ function redrawDoodle() {
|
||||
}
|
||||
|
||||
function adjustBounds(x, y) {
|
||||
var newPointsOutsideOfCurrentBounds = false;
|
||||
// console.log("f:adjustBounds("+x+","+y+")");
|
||||
|
||||
if (doodleBounds[0] == -1) {
|
||||
@ -177,11 +181,27 @@ function redrawDoodle() {
|
||||
return;
|
||||
}
|
||||
|
||||
doodleBounds[0] = Math.min(doodleBounds[0], x); // left
|
||||
doodleBounds[2] = Math.max(doodleBounds[2], x); // right
|
||||
|
||||
doodleBounds[1] = Math.min(doodleBounds[1], y); // top
|
||||
doodleBounds[3] = Math.max(doodleBounds[3], y); // bottom
|
||||
if (x < doodleBounds[0]) {
|
||||
doodleBounds[0] = x;
|
||||
newPointsOutsideOfCurrentBounds = true;
|
||||
}
|
||||
if (x > doodleBounds[2]) {
|
||||
doodleBounds[2] = x;
|
||||
newPointsOutsideOfCurrentBounds = true;
|
||||
}
|
||||
if (y < doodleBounds[1]) {
|
||||
doodleBounds[1] = y;
|
||||
newPointsOutsideOfCurrentBounds = true;
|
||||
}
|
||||
if (y > doodleBounds[3]) {
|
||||
doodleBounds[3] = y;
|
||||
newPointsOutsideOfCurrentBounds = true;
|
||||
}
|
||||
// doodleBounds[0] = Math.min(doodleBounds[0], x); // left
|
||||
// doodleBounds[2] = Math.max(doodleBounds[2], x); // right
|
||||
//
|
||||
// doodleBounds[1] = Math.min(doodleBounds[1], y); // top
|
||||
// doodleBounds[3] = Math.max(doodleBounds[3], y); // bottom
|
||||
|
||||
// draw the bounding rect (DEBUG)
|
||||
/*
|
||||
@ -195,6 +215,7 @@ function redrawDoodle() {
|
||||
|
||||
// console.log(" new bounds: " + doodleBounds);
|
||||
|
||||
return newPointsOutsideOfCurrentBounds;
|
||||
}
|
||||
|
||||
// does what exactly?
|
||||
@ -264,15 +285,11 @@ function onCanvasMouseDown(e) {
|
||||
draw(x, y, 0.5);
|
||||
}
|
||||
|
||||
var prevPoint = {x:-1, y:-1};
|
||||
function onCanvasMouseMove(e) {
|
||||
if (!dragging) return;
|
||||
// console.log("onmousemove");
|
||||
|
||||
// _points.push([e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop, false]);
|
||||
// adjustBounds(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
|
||||
// adjustPreviewTransformation();
|
||||
// draw(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
|
||||
|
||||
var x, y;
|
||||
if (e.offsetX != undefined) {
|
||||
x = e.offsetX;
|
||||
@ -282,21 +299,24 @@ function onCanvasMouseMove(e) {
|
||||
y = e.layerY;
|
||||
}
|
||||
|
||||
_points.push([x, y, false]);
|
||||
adjustBounds(x, y);
|
||||
adjustPreviewTransformation();
|
||||
draw(x, y);
|
||||
|
||||
// update counter -> this was for getting a handle on how often the Canvas fires a move-event
|
||||
/*
|
||||
movementCounter++;
|
||||
if (new Date().getTime() - prevCountingTime > 1000) {
|
||||
// console.log("number of moves in 1sec: " + movementCounter)
|
||||
prevCountingTime= new Date().getTime();
|
||||
$("#numtimes").text(movementCounter + " times");
|
||||
movementCounter = 0;
|
||||
if (prevPoint.x != -1 || prevPoint.y != -1) {
|
||||
var dist = Math.sqrt(Math.pow((prevPoint.x - x), 2) + Math.pow((prevPoint.y - y), 2));
|
||||
if (dist > 5) {
|
||||
_points.push([x, y, false]);
|
||||
adjustBounds(x, y)
|
||||
adjustPreviewTransformation();
|
||||
draw(x, y);
|
||||
prevPoint.x = x;
|
||||
prevPoint.y = y;
|
||||
}
|
||||
} else {
|
||||
_points.push([x, y, false]);
|
||||
adjustBounds(x, y)
|
||||
adjustPreviewTransformation();
|
||||
draw(x, y);
|
||||
prevPoint.x = x;
|
||||
prevPoint.y = y;
|
||||
}
|
||||
//*/
|
||||
|
||||
// DEBUG
|
||||
// $("#textdump").text("");
|
||||
@ -304,7 +324,12 @@ function onCanvasMouseMove(e) {
|
||||
// $("#textdump").append("doodletransform:" + doodleTransform + "\n");
|
||||
|
||||
if (new Date().getTime() - prevRedrawTime > redrawInterval) {
|
||||
redrawPreview();
|
||||
// redrawing the whole preview the first X points ensures that the doodleBounds is set well
|
||||
if (_points.length < 50) {
|
||||
redrawPreview();
|
||||
} else {
|
||||
updatePreview(x, y, true);
|
||||
}
|
||||
prevRedrawTime = new Date().getTime();
|
||||
}
|
||||
}
|
||||
@ -351,11 +376,24 @@ function onCanvasTouchMove(e) {
|
||||
var x = e.touches[0].pageX - drawCanvasTopLeftCoords[0];
|
||||
var y = e.touches[0].pageY - drawCanvasTopLeftCoords[1];
|
||||
|
||||
_points.push([x, y, false]);
|
||||
adjustBounds(x, y);
|
||||
adjustPreviewTransformation();
|
||||
draw(x, y);
|
||||
|
||||
if (prevPoint.x != -1 || prevPoint.y != -1) {
|
||||
var dist = Math.sqrt(Math.pow((prevPoint.x - x), 2) + Math.pow((prevPoint.y - y), 2));
|
||||
if (dist > 5) {
|
||||
_points.push([x, y, false]);
|
||||
adjustBounds(x, y)
|
||||
adjustPreviewTransformation();
|
||||
draw(x, y);
|
||||
prevPoint.x = x;
|
||||
prevPoint.y = y;
|
||||
}
|
||||
} else {
|
||||
_points.push([x, y, false]);
|
||||
adjustBounds(x, y)
|
||||
adjustPreviewTransformation();
|
||||
draw(x, y);
|
||||
prevPoint.x = x;
|
||||
prevPoint.y = y;
|
||||
}
|
||||
|
||||
// update counter -> this was for getting a handle on how often the Canvas fires a move-event
|
||||
/*
|
||||
@ -369,36 +407,27 @@ function onCanvasTouchMove(e) {
|
||||
//*/
|
||||
|
||||
if (new Date().getTime() - prevRedrawTime > redrawInterval) {
|
||||
redrawPreview();
|
||||
// redrawing the whole preview the first X points ensures that the doodleBounds is set well
|
||||
if (_points.length < 50) {
|
||||
redrawPreview();
|
||||
} else {
|
||||
updatePreview(x, y, true);
|
||||
}
|
||||
prevRedrawTime = new Date().getTime();
|
||||
}
|
||||
}
|
||||
|
||||
function onCanvasTouchEnd(e) {
|
||||
// console.log("ontouchend");
|
||||
console.log("doodleBounds: " + doodleBounds);
|
||||
console.log("doodleTransform: " + doodleTransform);
|
||||
// ctx.stroke();
|
||||
|
||||
console.log("_points.length :" + _points.length);
|
||||
|
||||
redrawPreview();
|
||||
}
|
||||
|
||||
function prevent(e) {
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
function print(e) {
|
||||
|
||||
output = path.attributes.d.nodeValue;
|
||||
console.log(output);
|
||||
|
||||
output = output.split("M").join("\n");
|
||||
output = output.split(" L").join("_");
|
||||
output = output.split(" ").join(",");
|
||||
output = output.split("_").join(" ");
|
||||
|
||||
output = "\nBEGIN\n" + output + "\n\nEND\n";
|
||||
|
||||
$.post("/doodle3d.of", { data:output }, function(data) {
|
||||
btnPrint.disabled = false;
|
||||
});
|
||||
}
|
||||
//*/
|
||||
}
|
||||
@ -11,7 +11,7 @@ var svgPathRegExp = /[LM]\d* \d*/ig;
|
||||
var svgPathParamsRegExp = /([LM])(\d*) (\d*)/;
|
||||
|
||||
var prevRedrawTime = new Date().getTime();
|
||||
var redrawInterval = 1000 / 20; // ms
|
||||
var redrawInterval = 1000 / 30; // ms
|
||||
|
||||
function initPreviewRendering() {
|
||||
console.log("f:initPreviewRendering()");
|
||||
@ -44,7 +44,9 @@ var prevY = 0;
|
||||
var highlight = true; //highlight bottom, middle and top layers
|
||||
|
||||
var linesRaw = "";
|
||||
function redrawPreview() {
|
||||
var debug_redrawSimplification = 6;
|
||||
function redrawPreview(redrawLess) {
|
||||
if (redrawLess == undefined) redrawLess = false;
|
||||
//*/
|
||||
//TODO
|
||||
/*
|
||||
@ -53,6 +55,26 @@ function redrawPreview() {
|
||||
niet?
|
||||
*/
|
||||
|
||||
if (!redrawLess) {
|
||||
//debug_redrawSimplification = Math.round(_points.length / 65);
|
||||
//*
|
||||
if (_points.length < 100) {
|
||||
debug_redrawSimplification = 6;
|
||||
} else if (_points.length < 250) {
|
||||
debug_redrawSimplification = 7;
|
||||
} else if (_points.length < 400) {
|
||||
debug_redrawSimplification = 8;
|
||||
} else if (_points.length < 550) {
|
||||
debug_redrawSimplification = 9;
|
||||
} else if (_points.length < 700) {
|
||||
debug_redrawSimplification = 10;
|
||||
} else {
|
||||
debug_redrawSimplification = 11;
|
||||
}
|
||||
//*/
|
||||
// console.log("debug_redrawSimplification: " + debug_redrawSimplification);
|
||||
}
|
||||
|
||||
if (_points.length < 2) return;
|
||||
|
||||
var y = 0;
|
||||
@ -65,12 +87,19 @@ function redrawPreview() {
|
||||
|
||||
for(var i = 0; i < numLayers; i++) {
|
||||
|
||||
if(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1){
|
||||
|
||||
if(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1) {
|
||||
previewCtx.globalAlpha = 1;
|
||||
} else {
|
||||
previewCtx.globalAlpha = globalAlpha;
|
||||
}
|
||||
|
||||
if (redrawLess && i%debug_redrawSimplification != 0 && !(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1) ) {
|
||||
y -= yStep;
|
||||
r += rStep;
|
||||
continue;
|
||||
}
|
||||
|
||||
previewCtx.save();
|
||||
|
||||
previewCtx.translate(layerCX, layerOffsetY + layerCY + y);
|
||||
@ -89,6 +118,9 @@ function redrawPreview() {
|
||||
previewCtx.moveTo(adjustedDoodlePoint.x, adjustedDoodlePoint.y);
|
||||
for(var j = 1; j < _points.length; j++) {
|
||||
adjustedDoodlePoint = centeredAndScaledDoodlePoint(_points[j])
|
||||
// if (redrawLess && Math.floor(j/debug_redrawSimplification)%2 == 0 ) continue;
|
||||
// if (redrawLess && Math.floor(j/debug_redrawSimplification)%2 == 0 ) continue;
|
||||
if (redrawLess && j%debug_redrawSimplification != 0 ) continue;
|
||||
previewCtx.lineTo(adjustedDoodlePoint.x, adjustedDoodlePoint.y);
|
||||
}
|
||||
previewCtx.stroke();
|
||||
@ -113,49 +145,65 @@ function centeredAndScaledDoodlePoint(p) {
|
||||
return obj;
|
||||
}
|
||||
|
||||
/*
|
||||
function updatePreview(x, y, move) {
|
||||
x *= globalScale;
|
||||
y *= globalScale;
|
||||
//*
|
||||
var updatePrevX = -1;
|
||||
var updatePrevY = -1;
|
||||
function updatePreview(_x, _y, redrawLess) {
|
||||
if (redrawLess == undefined) redrawLess = false;
|
||||
redrawLess = false;
|
||||
|
||||
if(!move) {
|
||||
var tY = 0;
|
||||
var r = 0;
|
||||
|
||||
if(!highlight) {
|
||||
previewCtx.globalAlpha = globalAlpha;
|
||||
previewCtx.beginPath();
|
||||
}
|
||||
for(var i=0;i<numLayers;i++) {
|
||||
|
||||
if(highlight && (i == 0 || i == numLayers/2 || i == numLayers-1)){
|
||||
previewCtx.stroke();
|
||||
previewCtx.globalAlpha = 1;
|
||||
previewCtx.beginPath();
|
||||
}
|
||||
|
||||
previewCtx.save();
|
||||
previewCtx.translate(layerCX,layerOffsetY+layerCY+tY);
|
||||
previewCtx.scale(1, scaleY)
|
||||
previewCtx.rotate(r);
|
||||
previewCtx.translate(-layerCX,-layerCY);
|
||||
|
||||
previewCtx.moveTo(prevX,prevY);
|
||||
previewCtx.lineTo(x,y);
|
||||
|
||||
tY -= yStep;
|
||||
r += rStep;
|
||||
previewCtx.restore();
|
||||
|
||||
if(highlight && (i == 0 || i == numLayers/2 || i == numLayers-1)){
|
||||
previewCtx.stroke();
|
||||
previewCtx.globalAlpha = globalAlpha;
|
||||
previewCtx.beginPath();
|
||||
}
|
||||
}
|
||||
if (_points.length < 2) return;
|
||||
if (updatePrevX == -1 || updatePrevY == -1) {
|
||||
updatePrevX = _x;
|
||||
updatePrevY = _y;
|
||||
return;
|
||||
}
|
||||
previewCtx.stroke();
|
||||
prevX = x;
|
||||
prevY = y;
|
||||
|
||||
// if (_points.length < 16 && Math.sqrt(Math.pow((updatePrevX - _x), 2) + Math.pow((updatePrevY - _y), 2)) < 8) return;
|
||||
|
||||
var y = 0;
|
||||
var r = 0;
|
||||
|
||||
previewCtx.lineWidth = strokeWidth;
|
||||
previewCtx.strokeStyle = '#f00'; //"rgba(255,255,0,0)";
|
||||
|
||||
for(var i = 0; i < numLayers; i++) {
|
||||
|
||||
|
||||
if(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1) {
|
||||
previewCtx.globalAlpha = 1;
|
||||
} else {
|
||||
previewCtx.globalAlpha = globalAlpha;
|
||||
}
|
||||
|
||||
if (redrawLess && i%debug_redrawSimplification != 0 && !(i == 0 || i == Math.floor(numLayers/2) || i == numLayers-1) ) {
|
||||
y -= yStep;
|
||||
r += rStep;
|
||||
continue;
|
||||
}
|
||||
|
||||
previewCtx.save();
|
||||
|
||||
previewCtx.translate(layerCX, layerOffsetY + layerCY + y);
|
||||
previewCtx.scale(viewerScale, scaleY * viewerScale);
|
||||
previewCtx.rotate(r);
|
||||
previewCtx.translate((-doodleTransform[0]) * (globalScale * doodleTransform[2]), (-doodleTransform[1]) * (globalScale * doodleTransform[3]));
|
||||
|
||||
|
||||
previewCtx.beginPath();
|
||||
var prevPoint = centeredAndScaledDoodlePoint([updatePrevX, updatePrevY]);
|
||||
previewCtx.moveTo(prevPoint.x, prevPoint.y);
|
||||
var adjustedDoodlePoint = centeredAndScaledDoodlePoint([_x, _y]);
|
||||
previewCtx.lineTo(adjustedDoodlePoint.x, adjustedDoodlePoint.y);
|
||||
previewCtx.stroke();
|
||||
|
||||
y -= yStep;
|
||||
r += rStep;
|
||||
previewCtx.restore();
|
||||
}
|
||||
previewCtx.globalAlpha = globalAlpha;
|
||||
updatePrevX = _x;
|
||||
updatePrevY = _y;
|
||||
|
||||
}
|
||||
//*/
|
||||
Loading…
Reference in New Issue
Block a user