baku89 / pentool Goto Github PK

Vector graphics editor with programmable pen tools

License: MIT License

Vue 12.40% JavaScript 82.66% HTML 0.72% TypeScript 4.23%

pentool's Introduction

Paper.js Editor

Vector graphics editor with programmable pen tools aiming to be alternative to de facto standards on graphic design tools. This tool is built deeply based on Paper.js. I'd like to take over the phillosophy of [Scriptgrapher].

Developemnt

git clone https://github.com/baku89/paper-editor
cd paper-editor
yarn install
yarn dev

TODO

Enable path editing
custom shapes
Add snapping profile (abstracted method of snapping and smart guides)
Key/multitouch/MIDI/OSC assignment on tool parameters
Custom hook funcitons for cursor events (grid snapping, perspective grid, smoothening mouse movement)
Path constraints like CAD tool
Project variables

LICENSE

This repository is published under an MIT License. See the included LICENSE file.

pentool's People

Contributors

Stargazers

Watchers

pentool's Issues

[Pen] More examples

I've found this amazing article on different canvas drawing techniques – http://perfectionkills.com/exploring-canvas-drawing-techniques/

Web version not working

As above, the web browser version is not working , These are the errors from the console

Undo/Redo

Is this in the pipeline?

Missing gulp file?

Touch Events Not Working

I have an Asus VivoBook Flip 14 and when I try drawing your app doesn't draw. The only time it does is if I don't use the touch screen and just use my mouse.

[Pen] Concentric Donuts

Figma has added a concentric donuts tool, might be fun to create and integrate:

https://twitter.com/figmadesign/status/1055496901842227201

Collapse code on small screens

Hi!

This is an awesome idea and is working really well using my mouse on a laptop.
However, I really want to try this out on my mobile devices with pen support to see how it feels.
If I try loading it on a phone the view gets messed up because it's trying to fit the code along side the drawing area.
It'd be nice if the code view could be toggled so that you could have more space for writing, and to have it auto-hide on small screens.

Thanks for making this! I think it'd be a great way to teach artistically-minded people how to code. :D

Pinch-zoom / Pinch-rotate for Safari (& Mobile)

Issue #3 reminded me of my codepen, which I recently updated to include Safari gestures. Which means support for Safari desktop browser and Safari Mobile on iOS.

See: https://codepen.io/nexii/pen/mzyLYJ

There is:

document.addEventListener('gesturestart', onGesture);
document.addEventListener('gesturechange', onGesture);
document.addEventListener('gestureend', onGesture);

You can use event.scale and event.rotation. If I remember correctly:

Scale 1.0 is based on gesturestart, this is a uniform multiplier
Rotation 0.0 is based on gesturestart and the value is in degrees

Official documentation is available at: https://developer.apple.com/documentation/webkitjs/gestureevent

Misc feedbacks from @jimmygunawanapp

Audio sometimes does not go away, need to be able to easily remove and import new songs
Maybe simpler TimeLine start and end control
Help Documentation and also shortcuts can be handy

How do one access event properties such as point, delta, middlepoint etc.. From tools

Hi i am learning both vue.js and paper.js i am trying to create a tool to select drag and modify paths and curves. I need to have access to the mouse delta. And i am bit confused.
A little help will be much appreciated thanks.

Pinch-zoom on trackpads in modern browsers causes entire window to zoom

Hi,

There is an issue with the pinch-zoom at:

pentool/src/app.vue

Lines 176 to 187 in d00d1cd

    
                 this.canvas.addEventListener("mousewheel", e => { 
        
                   const view = paper.project.view; 
        
                   if (e.altKey || e.ctrlKey) { 
        
                     const zoomDelta = 1 + -e.deltaY / 100; 
        
                     const pivot = new paper.Point(e.x, e.y); //view.projectToView(new paper.Point(e.x, e.y)) 
        
                     view.scale(zoomDelta, pivot); 
        
                     view.emit("zoom", view.scaling.x); 
        
                   } else { 
        
                     view.translate(-e.deltaX, -e.deltaY); 
        
                   } 
        
                 });

Namely that without a e.preventDefault(); the entire page is zooming instead of only the artboard view.

To fix this, we need to add e.preventDefault();, but also addEventListener accepts a third argument for options, one of those event listener options is passive; This is enabled by default in modern browsers for performance reasons, so:

.addEventListener(e => …, { passive: false });

You can see an example of mousewheel listener here: https://codepen.io/nexii/pen/mzyLYJ

	this.canvas.addEventListener("mousewheel", e => {
	const view = paper.project.view;

	if (e.altKey \|\| e.ctrlKey) {
	const zoomDelta = 1 + -e.deltaY / 100;
	const pivot = new paper.Point(e.x, e.y); //view.projectToView(new paper.Point(e.x, e.y))
	view.scale(zoomDelta, pivot);
	view.emit("zoom", view.scaling.x);
	} else {
	view.translate(-e.deltaX, -e.deltaY);
	}
	});