vmario/doodle3d-client
0
0
Fork 0
mirror of https://github.com/Doodle3D/doodle3d-client.git synced 2024-11-22 09:17:56 +01:00
Code Issues Releases Wiki Activity

adjustments to make preview be initialized and updated better (when resizing)

Browse Source
This commit is contained in:
Adriaan Wormgoor 2013-10-11 13:42:12 +02:00
parent 65f43f197f
commit 080cc5670c
2 changed files with 26 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
js/init_layout.js
View File

@ -1,3 +1,4 @@
// TODO refactor this stuff, there's much to wipe
var drawAreaContainerMinHeight = 300; var drawAreaContainerMinHeight = 300;
var drawAreaContainerMaxHeight = 450; var drawAreaContainerMaxHeight = 450;
@ -13,15 +14,17 @@ function doOnResize() {
// canvas.width = $drawAreaContainer.width() - preview.width; // canvas.clientWidth; // canvas.width = $drawAreaContainer.width() - preview.width; // canvas.clientWidth;
// canvas.width = $("#mycanvasContainer").width(); // canvas.width = $("#mycanvasContainer").width();
canvas.width = drawCanvas.width(); canvas.width = $canvas.width();
canvas.height = drawCanvas.height(); // canvas.clientHeight; canvas.height = $canvas.height(); // canvas.clientHeight;
// canvas.height = $drawAreaContainer.height(); // canvas.clientHeight; // canvas.height = $drawAreaContainer.height(); // canvas.clientHeight;
// preview.width = 150; preview.width = $preview.width();
preview.height = $drawAreaContainer.height(); preview.height = $drawAreaContainer.height();
canvasWidth = $canvas.width(); canvasWidth = canvas.width;
canvasHeight = $canvas.height(); canvasHeight = canvas.height;
console.log(" preview.width: " + preview.width + ", $preview.width(): " + $preview.width());
calcPreviewCanvasProperties(); calcPreviewCanvasProperties();
@ -96,15 +99,15 @@ function initLayouting() {
// console.log(" preview.width: " + preview.width + ", $preview.width(): " + $preview.width()); // console.log(" preview.width: " + preview.width + ", $preview.width(): " + $preview.width());
// canvas.width = $drawAreaContainer.width() - preview.width; // canvas.clientWidth; // canvas.width = $drawAreaContainer.width() - preview.width; // canvas.clientWidth;
// canvas.width = $("#mycanvasContainer").width(); // canvas.width = $("#mycanvasContainer").width();
canvas.width = drawCanvas.width(); canvas.width = $canvas.width();
canvas.height = drawCanvas.height(); // canvas.clientHeight; canvas.height = $canvas.height(); // canvas.clientHeight;
// canvas.height = $drawAreaContainer.height(); // canvas.clientHeight; // canvas.height = $drawAreaContainer.height(); // canvas.clientHeight;
// preview.width = 150; preview.width = $preview.width();
preview.height = $drawAreaContainer.height(); preview.height = $drawAreaContainer.height();
canvasWidth = $canvas.width(); canvasWidth = canvas.width;
canvasHeight = $canvas.height(); canvasHeight = canvas.height;
$drawAreaContainer.show(); $drawAreaContainer.show();

22
js/previewRendering_v02.js
View File

@ -40,12 +40,12 @@ function initPreviewRendering() {
function calcPreviewCanvasProperties() { function calcPreviewCanvasProperties() {
console.log("f:calcPreviewCanvasProperties()"); console.log("f:calcPreviewCanvasProperties()");
globalScale = preview.width / canvasWidth;
layerCX = (canvasWidth / 2) * globalScale; // defined in canvasDrawing_v01.js layerCX = (canvasWidth / 2) * globalScale; // defined in canvasDrawing_v01.js
layerCY = (canvasHeight / 2) * globalScale; // defined in canvasDrawing_v01.js layerCY = (canvasHeight / 2) * globalScale; // defined in canvasDrawing_v01.js
layerOffsetY = preview.height - 1.75 * layerCY; // layerOffsetY = preview.height - 1.75 * layerCY;
yStep = (preview.height * (2 * previewVerticalPadding)) / maxNumLayers; layerOffsetY = preview.height * (1 - previewVerticalPadding.bottom);
yStep = (preview.height - (preview.height * (previewVerticalPadding.top + previewVerticalPadding.bottom))) / maxNumLayers;
// previewVerticalPadding
} }
// TODO (perhaps) : make the twist limit dynamic, depending on what's printable (w.r.t. overlapping) // TODO (perhaps) : make the twist limit dynamic, depending on what's printable (w.r.t. overlapping)
@ -58,7 +58,7 @@ var globalScale = 0.3; // global scale of preview (width preview / width canvas
var globalAlpha = 0.20; // global alpha of preview var globalAlpha = 0.20; // global alpha of preview
var scaleY = 0.4; // additional vertical scale per path for 3d effect var scaleY = 0.4; // additional vertical scale per path for 3d effect
var viewerScale = 0.65; // additional scale to fit into preview nicely (otherwise is fills out totally) var viewerScale = 0.65; // additional scale to fit into preview nicely (otherwise is fills out totally)
var previewVerticalPadding = .15; // % var previewVerticalPadding = { "top" : .15, "bottom" : 0.12 }; // %
var strokeWidth = 2; //4; var strokeWidth = 2; //4;
//var rStep = Math.PI/40; //Math.PI/40; // //var rStep = Math.PI/40; //Math.PI/40; //
var rStep = previewDefaults.rotation; // Math.PI/180; //Math.PI/40; // var rStep = previewDefaults.rotation; // Math.PI/180; //Math.PI/40; //
@ -125,7 +125,8 @@ function redrawPreview(redrawLess) {
previewCtx.save(); previewCtx.save();
previewCtx.translate(layerCX, layerOffsetY + layerCY + y); // previewCtx.translate(layerCX, layerOffsetY + layerCY + y);
previewCtx.translate(layerCX, layerOffsetY + y);
// previewCtx.setTransform(1, 0, 0, scaleY, layerCX, layerOffsetY+layerCY+y); // previewCtx.setTransform(1, 0, 0, scaleY, layerCX, layerOffsetY+layerCY+y);
previewCtx.scale(viewerScale, scaleY * viewerScale); previewCtx.scale(viewerScale, scaleY * viewerScale);
previewCtx.rotate(r); previewCtx.rotate(r);
@ -200,7 +201,8 @@ function renderToImageDataPreview() {
previewCtx.save(); previewCtx.save();
previewCtx.translate(layerCX,layerOffsetY+layerCY+y); // previewCtx.translate(layerCX,layerOffsetY+layerCY+y);
previewCtx.translate(layerCX,layerOffsetY+y);
previewCtx.scale(1, scaleY) previewCtx.scale(1, scaleY)
previewCtx.rotate(r); previewCtx.rotate(r);
previewCtx.translate(-layerCX,-layerCY); previewCtx.translate(-layerCX,-layerCY);
@ -245,7 +247,8 @@ function redrawRenderedPreview(redrawLess) {
} }
previewCtx.save(); previewCtx.save();
previewCtx.translate(layerCX,layerOffsetY+layerCY+y); previewCtx.translate(layerCX,layerOffsetY+y);
// previewCtx.translate(layerCX,layerOffsetY+layerCY+y);
previewCtx.scale(1, scaleY) previewCtx.scale(1, scaleY)
previewCtx.rotate(r); previewCtx.rotate(r);
previewCtx.translate(-layerCX,-layerCY); previewCtx.translate(-layerCX,-layerCY);
@ -310,7 +313,8 @@ function updatePreview(_x, _y, redrawLess) {
previewCtx.save(); previewCtx.save();
previewCtx.translate(layerCX, layerOffsetY + layerCY + y); // previewCtx.translate(layerCX, layerOffsetY + layerCY + y);
previewCtx.translate(layerCX, layerOffsetY + y);
previewCtx.scale(viewerScale, scaleY * viewerScale); previewCtx.scale(viewerScale, scaleY * viewerScale);
previewCtx.rotate(r); previewCtx.rotate(r);
previewCtx.translate((-doodleTransform[0]) * (globalScale * doodleTransform[2]), (-doodleTransform[1]) * (globalScale * doodleTransform[3])); previewCtx.translate((-doodleTransform[0]) * (globalScale * doodleTransform[2]), (-doodleTransform[1]) * (globalScale * doodleTransform[3]));