Small adjustments to #407
- Refactored drawGrid into two functions drawRectangularGrid and drawCircularGrid - Made sure grid for circular beds always "starts" at (0,0) so that e.g. for a radius of 105mm the center of the bed will be on the grid lines - Made center on circular bed be better visible by making origin lines thicker - Made initial focus on bed center properly
This commit is contained in:
Gina Häußge
parent
ba7d0a60e4
commit
c858c8f75b
1 changed files with 92 additions and 58 deletions
|
|
@ -182,74 +182,97 @@ GCODE.renderer = (function(){
|
|||
};
|
||||
|
||||
var drawGrid = function() {
|
||||
console.log("Drawing grid");
|
||||
|
||||
ctx.translate(offsetBedX, offsetBedY);
|
||||
if(renderOptions["bed"]["circular"]) {
|
||||
drawCircularGrid();
|
||||
} else {
|
||||
drawRectangularGrid();
|
||||
}
|
||||
ctx.translate(-offsetBedX, -offsetBedY);
|
||||
};
|
||||
|
||||
var drawRectangularGrid = function() {
|
||||
var i;
|
||||
var width = renderOptions["bed"]["x"] * zoomFactor;
|
||||
var height = renderOptions["bed"]["y"] * zoomFactor;
|
||||
var origin = {
|
||||
x: 0,
|
||||
y: -1 * renderOptions["bed"]["y"] * zoomFactor
|
||||
};
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.strokeStyle = renderOptions["colorGrid"];
|
||||
ctx.fillStyle = "#ffffff";
|
||||
ctx.lineWidth = 2;
|
||||
|
||||
ctx.rect(origin.x, origin.y, width, height);
|
||||
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
|
||||
ctx.strokeStyle = renderOptions["colorGrid"];
|
||||
ctx.lineWidth = 1;
|
||||
|
||||
ctx.beginPath();
|
||||
for (i = 0; i <= renderOptions["bed"]["x"]; i += gridStep) {
|
||||
ctx.moveTo(i * zoomFactor, 0);
|
||||
ctx.lineTo(i * zoomFactor, -1 * renderOptions["bed"]["y"] * zoomFactor);
|
||||
}
|
||||
ctx.stroke();
|
||||
|
||||
ctx.beginPath();
|
||||
for (i = 0; i <= renderOptions["bed"]["y"]; i += gridStep) {
|
||||
ctx.moveTo(0, -1 * i * zoomFactor);
|
||||
ctx.lineTo(renderOptions["bed"]["x"] * zoomFactor, -1 * i * zoomFactor);
|
||||
}
|
||||
ctx.stroke();
|
||||
};
|
||||
|
||||
var drawCircularGrid = function() {
|
||||
var i;
|
||||
|
||||
if(renderOptions["bed"]["circular"]) {
|
||||
ctx.strokeStyle = renderOptions["colorGrid"];
|
||||
ctx.fillStyle = "#ffffff";
|
||||
ctx.lineWidth = 2;
|
||||
ctx.strokeStyle = renderOptions["colorGrid"];
|
||||
ctx.fillStyle = "#ffffff";
|
||||
ctx.lineWidth = 2;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.arc(0, 0, renderOptions["bed"]["r"] * zoomFactor, 0, Math.PI * 2, true);
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
//~~ bed outline & origin
|
||||
ctx.beginPath();
|
||||
|
||||
ctx.strokeStyle = renderOptions["colorGrid"];
|
||||
ctx.lineWidth = 1;
|
||||
// outline
|
||||
ctx.arc(0, 0, renderOptions["bed"]["r"] * zoomFactor, 0, Math.PI * 2, true);
|
||||
|
||||
ctx.beginPath();
|
||||
for (i = -renderOptions["bed"]["r"]; i <= renderOptions["bed"]["r"]; i += gridStep) {
|
||||
var x = i;
|
||||
var y = Math.sqrt(Math.pow(renderOptions["bed"]["r"], 2) - Math.pow(x, 2));
|
||||
// origin
|
||||
ctx.moveTo(-1 * renderOptions["bed"]["r"] * zoomFactor, 0);
|
||||
ctx.lineTo(renderOptions["bed"]["r"] * zoomFactor, 0);
|
||||
ctx.moveTo(0, -1 * renderOptions["bed"]["r"] * zoomFactor);
|
||||
ctx.lineTo(0, renderOptions["bed"]["r"] * zoomFactor);
|
||||
|
||||
ctx.moveTo(x * zoomFactor, y * zoomFactor);
|
||||
ctx.lineTo(x * zoomFactor, -1 * y * zoomFactor);
|
||||
// draw
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
|
||||
ctx.moveTo(y * zoomFactor, x * zoomFactor);
|
||||
ctx.lineTo(-1 * y * zoomFactor, x * zoomFactor);
|
||||
}
|
||||
ctx.stroke();
|
||||
} else {
|
||||
var width = renderOptions["bed"]["x"] * zoomFactor;
|
||||
var height = renderOptions["bed"]["y"] * zoomFactor;
|
||||
var origin = {
|
||||
x: 0,
|
||||
y: -1 * renderOptions["bed"]["y"] * zoomFactor
|
||||
};
|
||||
ctx.strokeStyle = renderOptions["colorGrid"];
|
||||
ctx.lineWidth = 1;
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.strokeStyle = renderOptions["colorGrid"];
|
||||
ctx.fillStyle = "#ffffff";
|
||||
ctx.lineWidth = 2;
|
||||
//~~ grid starting from origin
|
||||
ctx.beginPath();
|
||||
for (i = 0; i <= renderOptions["bed"]["r"]; i += gridStep) {
|
||||
var x = i;
|
||||
var y = Math.sqrt(Math.pow(renderOptions["bed"]["r"], 2) - Math.pow(x, 2));
|
||||
|
||||
ctx.rect(origin.x, origin.y, width, height);
|
||||
ctx.moveTo(x * zoomFactor, y * zoomFactor);
|
||||
ctx.lineTo(x * zoomFactor, -1 * y * zoomFactor);
|
||||
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
ctx.moveTo(y * zoomFactor, x * zoomFactor);
|
||||
ctx.lineTo(-1 * y * zoomFactor, x * zoomFactor);
|
||||
|
||||
ctx.strokeStyle = renderOptions["colorGrid"];
|
||||
ctx.lineWidth = 1;
|
||||
ctx.moveTo(-1 * x * zoomFactor, y * zoomFactor);
|
||||
ctx.lineTo(-1 * x * zoomFactor, -1 * y * zoomFactor);
|
||||
|
||||
ctx.beginPath();
|
||||
for (i = 0; i <= renderOptions["bed"]["x"]; i += gridStep) {
|
||||
ctx.moveTo(i * zoomFactor, 0);
|
||||
ctx.lineTo(i * zoomFactor, -1 * renderOptions["bed"]["y"] * zoomFactor);
|
||||
}
|
||||
ctx.stroke();
|
||||
|
||||
ctx.beginPath();
|
||||
for (i = 0; i <= renderOptions["bed"]["y"]; i += gridStep) {
|
||||
ctx.moveTo(0, -1 * i * zoomFactor);
|
||||
ctx.lineTo(renderOptions["bed"]["x"] * zoomFactor, -1 * i * zoomFactor);
|
||||
}
|
||||
ctx.stroke();
|
||||
ctx.moveTo(y * zoomFactor, -1 * x * zoomFactor);
|
||||
ctx.lineTo(-1 * y * zoomFactor, -1 * x * zoomFactor);
|
||||
}
|
||||
|
||||
ctx.translate(-offsetBedX, -offsetBedY);
|
||||
ctx.stroke();
|
||||
};
|
||||
|
||||
var drawLayer = function(layerNum, fromProgress, toProgress, isNotCurrentLayer){
|
||||
|
|
@ -371,10 +394,12 @@ GCODE.renderer = (function(){
|
|||
};
|
||||
|
||||
var applyOffsets = function(mdlInfo) {
|
||||
var canvasCenter;
|
||||
|
||||
// determine bed and model offsets
|
||||
if (ctx) ctx.translate(-offsetModelX, -offsetModelY);
|
||||
if (renderOptions["centerViewport"] || renderOptions["zoomInOnModel"]) {
|
||||
var canvasCenter = ctx.transformedPoint(canvas.width / 2, canvas.height / 2);
|
||||
canvasCenter = ctx.transformedPoint(canvas.width / 2, canvas.height / 2);
|
||||
if (mdlInfo) {
|
||||
offsetModelX = canvasCenter.x - (mdlInfo.min.x + mdlInfo.modelSize.x / 2) * zoomFactor;
|
||||
offsetModelY = canvasCenter.y + (mdlInfo.min.y + mdlInfo.modelSize.y / 2) * zoomFactor;
|
||||
|
|
@ -390,8 +415,8 @@ GCODE.renderer = (function(){
|
|||
offsetBedX = -1 * (renderOptions["bed"]["x"] / 2 - (mdlInfo.min.x + mdlInfo.modelSize.x / 2)) * zoomFactor;
|
||||
offsetBedY = (renderOptions["bed"]["y"] / 2 - (mdlInfo.min.y + mdlInfo.modelSize.y / 2)) * zoomFactor;
|
||||
} else if (renderOptions["bed"]["circular"]) {
|
||||
var canvasCenter = ctx.transformedPoint(canvas.width / 2, canvas.height / 2);
|
||||
offsetModelX = canvasCenter.x;
|
||||
canvasCenter = ctx.transformedPoint(canvas.width / 2, canvas.height / 2);
|
||||
offsetModelX = canvasCenter.x;
|
||||
offsetModelY = canvasCenter.y;
|
||||
offsetBedX = 0;
|
||||
offsetBedY = 0;
|
||||
|
|
@ -438,10 +463,19 @@ GCODE.renderer = (function(){
|
|||
var bedWidth = renderOptions["bed"]["x"];
|
||||
var bedHeight = renderOptions["bed"]["y"];;
|
||||
if(renderOptions["bed"]["circular"]) {
|
||||
bedWidth = bedHeight = renderOptions["bed"]["r"] *2;
|
||||
bedWidth = bedHeight = renderOptions["bed"]["r"] * 2;
|
||||
}
|
||||
zoomFactor = Math.min((canvas.width - 10) / bedWidth, (canvas.height - 10) / bedHeight);
|
||||
ctx.translate((canvas.width - bedWidth * zoomFactor) / 2, bedHeight * zoomFactor + (canvas.height - bedHeight * zoomFactor) / 2);
|
||||
|
||||
var translationX, translationY;
|
||||
if (renderOptions["bed"]["circular"]) {
|
||||
translationX = canvas.width / 2;
|
||||
translationY = canvas.height / 2;
|
||||
} else {
|
||||
translationX = (canvas.width - bedWidth * zoomFactor) / 2;
|
||||
translationY = bedHeight * zoomFactor + (canvas.height - bedHeight * zoomFactor) / 2;
|
||||
}
|
||||
ctx.translate(translationX, translationY);
|
||||
|
||||
offsetModelX = 0;
|
||||
offsetModelY = 0;
|
||||
|
|
|
|||
Loading…
Reference in a new issue