skyler
/
Lightningbeam
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

put color on curve objects

This commit is contained in:
Skyler Lehmkuhl 2024-11-21 00:58:27 -05:00
parent 1569a40495
commit 265d9564ad
2 changed files with 50 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/bezier.js
View File

@ -1149,6 +1149,11 @@ class Bezier {
this._lut = []; // invalidate any precomputed LUT this._lut = []; // invalidate any precomputed LUT
} }
setColor(color) {
this.color = color
return this
}
verify() { verify() {
const print = this.coordDigest(); const print = this.coordDigest();
if (print !== this._print) { if (print !== this._print) {

81
src/main.js
View File

@ -124,13 +124,12 @@ let actions = {
let curvesList = action.curves let curvesList = action.curves
let shape = new Shape(action.startx, action.starty, context, action.uuid) let shape = new Shape(action.startx, action.starty, context, action.uuid)
for (let curve of curvesList) { for (let curve of curvesList) {
shape.addCurve( shape.addCurve(new Bezier(
new Bezier( curve.points[0].x, curve.points[0].y,
curve.points[0].x, curve.points[0].y, curve.points[1].x, curve.points[1].y,
curve.points[1].x, curve.points[1].y, curve.points[2].x, curve.points[2].y,
curve.points[2].x, curve.points[2].y, curve.points[3].x, curve.points[3].y
curve.points[3].x, curve.points[3].y ).setColor(curve.color))
))
} }
shape.update() shape.update()
object.addShape(shape) object.addShape(shape)
@ -167,13 +166,12 @@ let actions = {
let curvesList = action.newCurves let curvesList = action.newCurves
shape.curves = [] shape.curves = []
for (let curve of curvesList) { for (let curve of curvesList) {
shape.addCurve( shape.addCurve(new Bezier(
new Bezier( curve.points[0].x, curve.points[0].y,
curve.points[0].x, curve.points[0].y, curve.points[1].x, curve.points[1].y,
curve.points[1].x, curve.points[1].y, curve.points[2].x, curve.points[2].y,
curve.points[2].x, curve.points[2].y, curve.points[3].x, curve.points[3].y
curve.points[3].x, curve.points[3].y ).setColor(curve.color))
))
} }
shape.update() shape.update()
}, },
@ -182,13 +180,12 @@ let actions = {
let curvesList = action.oldCurves let curvesList = action.oldCurves
shape.curves = [] shape.curves = []
for (let curve of curvesList) { for (let curve of curvesList) {
shape.addCurve( shape.addCurve(new Bezier(
new Bezier( curve.points[0].x, curve.points[0].y,
curve.points[0].x, curve.points[0].y, curve.points[1].x, curve.points[1].y,
curve.points[1].x, curve.points[1].y, curve.points[2].x, curve.points[2].y,
curve.points[2].x, curve.points[2].y, curve.points[3].x, curve.points[3].y
curve.points[3].x, curve.points[3].y ).setColor(curve.color))
))
} }
shape.update() shape.update()
} }
@ -626,6 +623,7 @@ class Shape {
midpoint.x, midpoint.y, midpoint.x, midpoint.y,
midpoint.x, midpoint.y, midpoint.x, midpoint.y,
x, y) x, y)
curve.color = context.strokeStyle
this.curves.push(curve) this.curves.push(curve)
} }
clear() { clear() {
@ -716,6 +714,9 @@ class Shape {
newCurves.push(this.curves[i]) newCurves.push(this.curves[i])
} }
} }
for (let curve of newCurves) {
curve.color = context.strokeStyle
}
newCurves.reverse() newCurves.reverse()
this.curves = newCurves this.curves = newCurves
this.update() this.update()
@ -765,20 +766,16 @@ class Shape {
} }
draw(context) { draw(context) {
let ctx = context.ctx; let ctx = context.ctx;
ctx.beginPath()
ctx.lineWidth = this.lineWidth ctx.lineWidth = this.lineWidth
ctx.moveTo(this.startx, this.starty) ctx.lineCap = "round"
for (let curve of this.curves) {
ctx.bezierCurveTo(curve.points[1].x, curve.points[1].y,
curve.points[2].x, curve.points[2].y,
curve.points[3].x, curve.points[3].y)
// Debug, show curve endpoints
// ctx.beginPath()
// ctx.arc(curve.points[3].x,curve.points[3].y, 3, 0, 2*Math.PI)
// ctx.fill()
}
if (this.filled) { if (this.filled) {
ctx.beginPath()
ctx.moveTo(this.startx, this.starty)
for (let curve of this.curves) {
ctx.bezierCurveTo(curve.points[1].x, curve.points[1].y,
curve.points[2].x, curve.points[2].y,
curve.points[3].x, curve.points[3].y)
}
if (this.fillImage) { if (this.fillImage) {
let pat = ctx.createPattern(this.fillImage, "no-repeat") let pat = ctx.createPattern(this.fillImage, "no-repeat")
ctx.fillStyle = pat ctx.fillStyle = pat
@ -787,9 +784,19 @@ class Shape {
} }
ctx.fill() ctx.fill()
} }
if (this.stroked) { for (let curve of this.curves) {
ctx.strokeStyle = this.strokeStyle ctx.strokeStyle = curve.color
ctx.beginPath()
ctx.moveTo(curve.points[0].x, curve.points[0].y)
ctx.bezierCurveTo(curve.points[1].x, curve.points[1].y,
curve.points[2].x, curve.points[2].y,
curve.points[3].x, curve.points[3].y)
ctx.stroke() ctx.stroke()
// Debug, show curve endpoints
// ctx.beginPath()
// ctx.arc(curve.points[3].x,curve.points[3].y, 3, 0, 2*Math.PI)
// ctx.fill()
} }
} }
@ -1090,7 +1097,7 @@ function stage() {
context.activeVertex = undefined context.activeVertex = undefined
context.activeCurve = { context.activeCurve = {
initial: selection.curve, initial: selection.curve,
current: new Bezier(selection.curve.points), current: new Bezier(selection.curve.points).setColor(selection.curve.color),
shape: selection.shape, shape: selection.shape,
startmouse: {x: mouse.x, y: mouse.y} startmouse: {x: mouse.x, y: mouse.y}
} }
@ -1278,7 +1285,7 @@ function stage() {
if (selection) { if (selection) {
context.activeCurve = { context.activeCurve = {
current: selection.curve, current: selection.curve,
initial: new Bezier(selection.curve.points), initial: new Bezier(selection.curve.points).setColor(selection.curve.color),
shape: selection.shape, shape: selection.shape,
startmouse: mouse startmouse: mouse
} }