Comments (5)
@nidoro thank you for submitting the issue! Apologies for only getting to this now, I haven't been able to dedicate time to this lib for a while. I'll test your use case, try to reproduce the bug and fix it in the next few weeks.
from atrament.
Thanks for this example @nidoro . I modified it slightly to add support for fills, and fixed a few things that I assume have changed since your post (Point.point.x instead of point.x, ...). Not battle tested or anything but might save someone else a bit of trouble.
this.sketchpad.addEventListener('strokerecorded', (obj) => {
if (!this.sketchpad.recordPaused) {
obj.stroke.type = "stroke";
this.strokes.push(obj.stroke);
}
});
this.sketchpad.addEventListener('fillstart', ({ x, y }) => {
var obj = {};
obj.type = "fill";
obj.fillColor = this.sketchpad.color;
obj.x = x;
obj.y = y;
this.strokes.push(obj);
});
undo(){
this.strokes.pop();
this.sketchpad.clear();
this.sketchpad.recordPaused = true;
for (let stroke of this.strokes) {
if (stroke.type == "stroke"){
// set drawing options
this.sketchpad.mode = stroke.mode;
this.sketchpad.weight = stroke.weight;
this.sketchpad.smoothing = stroke.smoothing;
this.sketchpad.color = stroke.color;
this.sketchpad.adaptiveStroke = stroke.adaptiveStroke;
// don't want to modify original data
const points = stroke.points.slice();
const firstPoint = points.shift().point;
// beginStroke moves the "pen" to the given position and starts the path
this.sketchpad.beginStroke(firstPoint.x, firstPoint.y);
let prevPoint = firstPoint;
while (points.length > 0) {
const point = points.shift();
// the `draw` method accepts the current real coordinates
// (i. e. actual cursor position), and the previous processed (filtered)
// position. It returns an object with the current processed position.
const { x, y } = this.sketchpad.draw(point.point.x, point.point.y, prevPoint.x, prevPoint.y);
// the processed position is the one where the line is actually drawn to
// so we have to store it and pass it to `draw` in the next step
prevPoint = { x, y };
}
// endStroke closes the path
this.sketchpad.endStroke(prevPoint.x, prevPoint.y);
} else {
this.sketchpad.color = stroke.fillColor;
const startColor = Array.from(this.sketchpad.context.getImageData(stroke.x, stroke.y, 1, 1).data);
this.sketchpad._floodFill(stroke.x, stroke.y, startColor);
}
}
this.sketchpad.recordPaused = false;
}
from atrament.
Hi @nidoro
I ran into the same problem. In my case it seemed to be solved after modifying the while loop from "while (points.length > 0)" to "while (points.length > 1)". I haven't quite figured out why this works yet, but for now this is good enough for me.
from atrament.
@nidoro I may be nearly 3 years late, but I believe this bug has now been fixed via db7242e :) it looks like the stroke segments recorded when beginStroke
and endStroke
are called were redundant. Specifically the segment recorded during endStroke
caused the re-drawn stroke to be slightly longer than the original.
I am now working on a big update which will be released as v4 in the next few weeks. This fix will be part of it.
Thank you again for the bug report and apologies for being very, very late!
from atrament.
Hi @jakubfiala, no need for apologies, that's the nature of open source. I'm currently not using atrament in any of my projects, but it's good to know that, if I ever need it, this will be fixed. Thank a lot!
from atrament.
Related Issues (20)
- Demo link HOT 2
- Save strokes with uniform sizes HOT 2
- Add a "disable" option for drawing mode. HOT 1
- How to retain smoothing effect in SVG when programmatically creating SVG from stroke data HOT 2
- Sometimes drawing adds a line between beginning and end of stroke HOT 1
- question about layers/transparency HOT 2
- Realtime draw updates HOT 4
- Different behavior when Inspect Element is open on Chrome HOT 4
- Online Demo Error HOT 1
- Bundle with Rollup HOT 1
- Test rendering with WebGL HOT 1
- QA with iPad + Apple Pencil and a similar Android tablet HOT 2
- Add support for advanced `Touch` properties HOT 1
- Adaptive stroke causes flood fill artifacts HOT 2
- Fix demo link in readme HOT 1
- Just add some text labelling for drawings HOT 3
- Can only undo for one step HOT 4
- Click creates a line in top left corner HOT 1
- Diagonal line from top left
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from atrament.