drawingPad.ps.project.activeLayer.children
/**
* 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);
// 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.addChild(shape);
saveCanvasState(ps.project);
}
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.
