I’m trying to get a multiple tool paperjs example going that is a bit of a vector based “paint program”.
I’m trying to do this with a toolStack class from a Stack Overflow suggestion. The original post has two placeholder tools and I added another. The two native tools work fine and display, my third tool “multiLine” (which runs fine as a stand along file) seems to be working, does not throw errors in the browser, and from inspecting the results seems to have data in the structures. However the third tool doesn’t display.
I realize the syntax is different in different section of the code. Both syntaxes seem to work fine. I’m new to Javascripting so don’t know if this is an issue. Thanks in advance for any eyes or suggestions about the code.
Paul
<!-- Multiple Tools Paper Example -->
<!DOCTYPE html>
<html>
<style>
html,
body,
canvas {
width: 100%;
height: 100%;
margin: 0;
}
</style>
<script>
window.onload = () => {
// Setup Paper
paper.setup(document.querySelector('canvas'))
// Toolstack
class ToolStack {
constructor(tools) {
this.tools = tools.map(tool => tool())
}
activateTool(name) {
const tool = this.tools.find(tool => tool.name === name)
tool.activate()
}
// add more methods here as you see fit ...
}
// Tool Path, draws paths on mouse-drag
const toolPath = () => {
const tool = new paper.Tool()
tool.name = 'toolPath'
let path
tool.onMouseDown = function(event) {
path = new paper.Path()
path.strokeColor = '#4242ff'
path.strokeWidth = 15;
path.add(event.point)
}
tool.onMouseDrag = function(event) {
path.add(event.point)
console.log(path);
}
return tool
}
// Tool Circle, draws a 30px circle on mousedown
const toolCircle = () => {
const tool = new paper.Tool()
tool.name = 'toolCircle'
let path
tool.onMouseDown = function(event) {
path = new paper.Path.Circle({
center: event.point,
radius: 30,
fillColor: '#9C27B0'
})
}
return tool
}
// This is the tool I added which does not display
const multiLine = () => {
const tool = new paper.Tool()
tool.name = 'multiLine'
var values = {
//lines: 5,
lines: 4,
//size: 40,
size: 10,
smooth: true
};
var paths;
// tool.onMouseDown = function(event) { // this worked for debugging the tool
// path = new paper.Path()
// path.strokeColor = '#ff4242'
// path.strokeWidth = 10
// path.add(event.point)
// }
//
// tool.onMouseDrag = function(event) {
// path.add(event.point)
// }
tool.onMouseDown = function(event) {
paths = [];
for (var i = 0; i < values.lines; i++){
var path = new paper.Path();
path.strokeColor = '#FF2222';
path.strokeWidth = 25;
paths.push(path);
console.log(i);
}
}
tool.onMouseDrag = function(event){
var offset = event.delta;
offset.angle = offset.angle + 90;
var lineSize = values.size / values.lines;
for (var i = 0; i < values.lines; i++) {
var path = paths[values.lines - 1 - i];
//offset.length = lineSize * i + lineSize / 2;
offset.length = (-i * lineSize) * (Math.max(event.delta.length /15, 1));
path.add(event.middlePoint + offset);
// path.smooth();
console.log(paths[1]);
}
}
return tool
}
// Construct a Toolstack, passing your Tools
const toolStack = new ToolStack([toolPath, toolCircle, multiLine])
// Activate a certain Tool
toolStack.activateTool('toolPath')
// Attach click handlers for Tool activation on all
// DOM buttons with class '.tool-button'
document.querySelectorAll('.tool-button').forEach(toolBtn => {
toolBtn.addEventListener('click', e => {
toolStack.activateTool(e.target.getAttribute('data-tool-name'))
})
})
}
// function onKeyDown(event) {
// if (event.key == 'd'){
// project.activeLayer.removeChildren();
// }
// if (event.key == 'z'){
// project.activeLayer.removeChildren(project.activeLayer.lastChild.index);
// }
//
// }
</script>
<head>
<title>
StackExchange Multiple Tools
</title>
<meta name="generator" content="BBEdit 14.1" />
</head>
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.5/paper-core.js">
</script>
<button class="tool-button" data-tool-name="toolPath">
Draw Paths
</button>
<button class="tool-button" data-tool-name="toolCircle">
Stamp Circles
</button>
<button class="tool-button" data-tool-name="multiLine">
Multi Lines
</button>
<canvas resize>
</canvas>
</body>
</html>