naclcaleb / draw Goto Github PK
View Code? Open in Web Editor NEWAn online drawing program
Home Page: https://naclcaleb.github.io/Draw/
License: GNU General Public License v3.0
An online drawing program
Home Page: https://naclcaleb.github.io/Draw/
License: GNU General Public License v3.0
This code needs to be cleaned up - beautified, formatted, and comments added.
Currently I have the "undo" command working with the shortcut Ctrl+Z, but it doesn't do redo.
I already have all the infrastructure for handling redos though. The "Layer" class stores an "undone" array that is updated whenever "undo" is called. All you have to do to add the feature is add a key listener for Ctrl+Y, and when that happens, do the following:
Put the first element in the "undone" array into the "strokes" array (this is inside the Layer class, so they'll be this.undone
and this.strokes
). The first element should be deleted from the undone
array.
Now call the updateRender
function on the Layer class (this.updateRender()
).
@OOPS-Studio, I was wondering if you might want to take this up?
Add a feature so we can save our drawings!
If you draw a stroke, then erase part of it, then draw another thing, and then use Ctrl+Z
to undo, the eraser stroke gets a fill, and is no longer erasing.
So, I have a weird problem... When I undo and then redo and then try to undo again, it doesn't do anything. If I try to undo enough times then the screen starts to flash, and then the whole drawing disappears... Hope we can find a fix for this! ;) (More like, you find a fix if I'm not successful in the next 5 seconds! ;3) (Sorry for all the sarcasm... If you don't like it, I'll stop! ๐ )
The program begins to lag after a while of drawing, especially with the "Netted" and "Sketchy" brushes.
When I undo 4 times, and then redo 4 times, and then undo 4 times, all's good. However, if I undo 5 times and then redo 10 times, then I have to undo 5 times before the undos will start doing anything! :) I'll start working on that now! :)
Isn't the package.json
supposed to have the same information as the Draw project? The package.json has the project of mdl-select-component and the repo has information of Draw, should I change the information to match this current repo? I could open it in a new pull request.
This is a slightly more robust issue to deal with, but I've got all the infrastructure built in.
Basically it needs to have a UI somewhere out of the way but also easily available, and then in the code, a layer can be added by calling canvas.push(new Layer(CANVAS_WIDTH, CANVAS_HEIGHT))
somewhere in index.js
. Then the active layer can be switched by changing the global variable ACTIVE_LAYER
to the appropriate index in the canvas.layers
array.
Say you zoom in on a small part of the canvas. When you change the brush color, size, or opacity, it's drawing on the canvas right through the options panel!!
If you make a long stroke, especially with the "netted" or "sketchy" brushes, the program will lag while you're trying to undo them.
This program needs the option of uploading an image to use as a brush.
I need the canvas to zoom in and out when you scroll. I've tried a few ways, such as editing the CSS transform: scale()
rule from my JavaScript, and also increasing the width and height of the elements. The former worked perfectly, except that the mouse coordinates then got confused.
In you README.md
file, you state to run the python -m SimpleHTTPServer
or run on an apache server (which is not an option). Is there something I need to configure to run the command?
This is the output:
Windows PowerShell
Copyright (C) Microsoft Corporation. All rights reserved.
PS C:\Users\rocke\Desktop\Draw> python -m SimpleHTTPServer
C:\Users\rocke\AppData\Local\Programs\Python\Python37-32\python.exe: No module named SimpleHTTPServer
PS C:\Users\rocke\Desktop\Draw>
If you make a regular stroke, then use an eraser stroke, then press Ctrl+Z, the entire drawing disappears. The culprit is probably some sort of a ctx.globalCompositionOperation
reset I forgot to do.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.