drawingPad.ps.project.activeLayer.children
//drawingPad.ps.project.activeLayer.children["shapes"].scale(1.1)
mutable scale_factor = 1
/**
* Calling this function will zoom in, and calls drawGridLine function that draw grid lines of calculated grid size
* on the canvas.
* @param {*} p - the paper.js scope object, where we can access all canvos components.
*/
function btnZoomInFunction(p) {
canvasValues.scale += 1;
canvasValues.gridScale = gridSize(
canvasValues.defaltSize,
canvasValues.scale,
canvasValues.scaleFactor
);
drawGridLines(p);
//scalePathsInMainGroup(p);
}
/**
* Calling this function will zoom out, and calls drawGridLine function that draw grid lines of calculated grid size
* on the canvas.
* @param {*} p - the paper.js scope object, where we can access all canvos components.
*/
function btnZoomOutFunction(p) {
if (canvasValues.scale > -4) {
canvasValues.scale *= 0.9;
canvasValues.gridScale = gridSize(
canvasValues.defaltSize,
canvasValues.scale,
canvasValues.scaleFactor
);
}
drawGridLines(p);
//scalePathsInMainGroup(p);
p.project.activeLayer.children["shapes"].scale(0.9);
}
/**
* Sets up a new canvas based on the above dimensions
*/
makeDrawingPad = () => {
clearDrawingIndicator;
let size = 20;
let canvas = DOM.canvas(DRAWING_PAD_WIDTH, DRAWING_PAD_HEIGHT);
canvas.style.backgroundColor = "white";
let ps = (() => {
let ps = new paper.PaperScope();
ps.setup(canvas);
// Flip Y axis so that it points "up" the page to match the Shopbot. This should only occur once to avoid constant flipping.
ps.view.scale(1, -1);
var canvasTool = new ps.Tool({ name: "canvasTool" });
return ps;
})();
canvas.ps = ps;
ps.project.activeLayer.removeChildren();
// initializes a new tool
initTool(ps);
// adds a border around the canvas
addBorder(canvas.ps, canvas.ps.view.bounds);
invalidation.then(() => {
ps.remove();
canvas.remove();
});
// draws coordinate grid on canvas
setUpCanvas(canvas.ps);
var shapes = new ps.Group({ name: "shapes" });
// save the current state of the canvas to the stack
saveCanvasState(canvas.ps.project);
return canvas;
}
/**
* Draws the given shape on the canvas
* @param {*} ps - paper.js scope object
* @param {*} shapeName - the type of shape to draw
*/
function addShape(ps, shapeName) {
let shape;
if (shapeName === "circle") {
shape = new ps.Path.Circle(ps.project.view.center, 40);
shape.strokeColor = "black";
shape.strokeWidth = 2;
shape.callParams = { r: 40, op: "circle" };
} else if (shapeName === "rectangle") {
shape = new ps.Path.Rectangle(ps.project.view.center, new ps.Size(100, 75));
shape.strokeColor = "black";
shape.strokeWidth = 2;
shape.callParams = {
width: 100,
height: 75,
op: "rectangle"
};
} else {
return;
}
shape.callParams = {
...shape.callParams,
x: DRAWING_PAD_WIDTH / 2,
y: DRAWING_PAD_HEIGHT / 2,
staged: false,
cutSide: "outside",
obj: shape
};
ps.project.activeLayer.children["shapes"].addChild(shape);
saveCanvasState(ps.project);
}
import {
canvasPoint,
findItemNameInGroup,
ensureGroupExistsInPaper,
addChildToGroup,
activateTool
} from "f7064faddbbc3e58"
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
