diff --git a/gpu/gpu.go b/gpu/gpu.go index 7d6d9952..33d2c327 100644 --- a/gpu/gpu.go +++ b/gpu/gpu.go @@ -25,6 +25,7 @@ import ( gunsafe "gioui.org/internal/unsafe" "gioui.org/layout" "gioui.org/op" + "gioui.org/op/clip" ) type GPU struct { @@ -125,6 +126,8 @@ type material struct { type clipOp struct { // TODO: Use image.Rectangle? bounds f32.Rectangle + width float32 + style clip.StrokeStyle } // imageOpData is the shadow of paint.ImageOp. @@ -157,6 +160,10 @@ func (op *clipOp) decode(data []byte) { } *op = clipOp{ bounds: layout.FRect(r), + width: math.Float32frombits(bo.Uint32(data[17:])), + style: clip.StrokeStyle{ + Cap: clip.StrokeCap(data[21]), + }, } } @@ -805,7 +812,7 @@ loop: // Why is this not used for the offset shapes? op.bounds = v.bounds } else { - aux, op.bounds = d.buildVerts(aux, trans) + aux, op.bounds = d.buildVerts(aux, trans, op.width, op.style) // add it to the cache, without GPU data, so the transform can be // reused. d.pathCache.put(auxKey, opCacheValue{bounds: op.bounds}) @@ -1210,7 +1217,7 @@ func (d *drawOps) writeVertCache(n int) []byte { } // transform, split paths as needed, calculate maxY, bounds and create GPU vertices. -func (d *drawOps) buildVerts(aux []byte, tr f32.Affine2D) (verts []byte, bounds f32.Rectangle) { +func (d *drawOps) buildVerts(aux []byte, tr f32.Affine2D, width float32, sty clip.StrokeStyle) (verts []byte, bounds f32.Rectangle) { inf := float32(math.Inf(+1)) d.qs.bounds = f32.Rectangle{ Min: f32.Point{X: inf, Y: inf}, @@ -1219,14 +1226,37 @@ func (d *drawOps) buildVerts(aux []byte, tr f32.Affine2D) (verts []byte, bounds d.qs.d = d bo := binary.LittleEndian startLength := len(d.vertCache) - for qi := 0; len(aux) >= (ops.QuadSize + 4); qi++ { - d.qs.contour = bo.Uint32(aux) - quad := ops.DecodeQuad(aux[4:]) - quad = quad.Transform(tr) - d.qs.splitAndEncode(quad) + switch { + default: + // Outline path. + for qi := 0; len(aux) >= (ops.QuadSize + 4); qi++ { + d.qs.contour = bo.Uint32(aux) + quad := ops.DecodeQuad(aux[4:]) + quad = quad.Transform(tr) - aux = aux[ops.QuadSize+4:] + d.qs.splitAndEncode(quad) + + aux = aux[ops.QuadSize+4:] + } + case width > 0: + // Stroke path. + quads := make(strokeQuads, 0, 2*len(aux)/(ops.QuadSize+4)) + for qi := 0; len(aux) >= (ops.QuadSize + 4); qi++ { + quad := strokeQuad{ + contour: bo.Uint32(aux), + quad: ops.DecodeQuad(aux[4:]), + } + quads = append(quads, quad) + aux = aux[ops.QuadSize+4:] + } + quads = quads.stroke(width, sty) + for _, quad := range quads { + d.qs.contour = quad.contour + quad.quad = quad.quad.Transform(tr) + + d.qs.splitAndEncode(quad.quad) + } } fillMaxY(d.vertCache[startLength:]) diff --git a/gpu/stroke.go b/gpu/stroke.go new file mode 100644 index 00000000..75e9189e --- /dev/null +++ b/gpu/stroke.go @@ -0,0 +1,435 @@ +// SPDX-License-Identifier: Unlicense OR MIT + +// Most of the algorithms to compute strokes and their offsets have been +// extracted, adapted from (and used as a reference implementation): +// - github.com/tdewolff/canvas (Licensed under MIT) +// +// These algorithms have been implemented from: +// Fast, precise flattening of cubic Bézier path and offset curves +// Thomas F. Hain, et al. +// +// An electronic version is available at: +// https://seant23.files.wordpress.com/2010/11/fastpreciseflatteningofbeziercurve.pdf +// +// Possible improvements (in term of speed and/or accuracy) on these +// algorithms are: +// +// - Polar Stroking: New Theory and Methods for Stroking Paths, +// M. Kilgard +// https://arxiv.org/pdf/2007.00308.pdf +// +// - https://raphlinus.github.io/graphics/curves/2019/12/23/flatten-quadbez.html +// R. Levien + +package gpu + +import ( + "math" + + "gioui.org/f32" + "gioui.org/internal/ops" + "gioui.org/op/clip" +) + +type strokeQuad struct { + contour uint32 + quad ops.Quad +} + +type strokeState struct { + p0, p1 f32.Point // p0 is the start point, p1 the end point. + n0, n1 f32.Point // n0 is the normal vector at the start point, n1 at the end point. + r0, r1 float32 // r0 is the curvature at the start point, r1 at the end point. + ctl f32.Point // ctl is the control point of the quadratic Bézier segment. +} + +type strokeQuads []strokeQuad + +func (qs *strokeQuads) lineTo(pt f32.Point) { + end := (*qs)[len(*qs)-1].quad.To + *qs = append(*qs, strokeQuad{ + quad: ops.Quad{ + From: end, + Ctrl: end.Add(pt).Mul(0.5), + To: pt, + }, + }) +} + +// split splits a slice of quads into slices of quads grouped +// by contours (ie: splitted at move-to boundaries). +func (qs strokeQuads) split() []strokeQuads { + if len(qs) == 0 { + return nil + } + + var ( + c uint32 + o []strokeQuads + i = len(o) + ) + for _, q := range qs { + if q.contour != c { + c = q.contour + i = len(o) + o = append(o, strokeQuads{}) + } + o[i] = append(o[i], q) + } + + return o +} + +func (qs strokeQuads) stroke(width float32, sty clip.StrokeStyle) strokeQuads { + var ( + o strokeQuads + hw = 0.5 * width + ) + + for _, ps := range qs.split() { + rhs, lhs := ps.offset(hw, sty) + switch lhs { + case nil: + o = o.append(rhs) + default: + // Closed path. + // Inner path should go opposite direction to cancel outer path. + switch { + case ps.ccw(): + lhs = lhs.reverse() + o = o.append(rhs) + o = o.append(lhs) + default: + rhs = rhs.reverse() + o = o.append(lhs) + o = o.append(rhs) + } + } + } + return o +} + +// offset returns the right-hand and left-hand sides of the path, offset by +// the half-width hw. +// The stroke style sty handles how segments are joined and ends are capped. +func (qs strokeQuads) offset(hw float32, sty clip.StrokeStyle) (rhs, lhs strokeQuads) { + var ( + states []strokeState + beg = qs[0].quad.From + end = qs[len(qs)-1].quad.To + closed = beg == end + ) + for i := range qs { + q := qs[i].quad + + var ( + n0 = strokePathNorm(q.From, q.Ctrl, q.To, 0, hw) + n1 = strokePathNorm(q.From, q.Ctrl, q.To, 1, hw) + r0 = strokePathCurv(q.From, q.Ctrl, q.To, 0) + r1 = strokePathCurv(q.From, q.Ctrl, q.To, 1) + ) + states = append(states, strokeState{ + p0: q.From, + p1: q.To, + n0: n0, + n1: n1, + r0: r0, + r1: r1, + ctl: q.Ctrl, + }) + } + + const tolerance = 0.01 + for i, state := range states { + rhs = rhs.append(strokeQuadBezier(state, +hw, tolerance)) + lhs = lhs.append(strokeQuadBezier(state, -hw, tolerance)) + + // join the current and next segments + if hasNext := i+1 < len(states); hasNext || closed { + var next strokeState + switch { + case hasNext: + next = states[i+1] + case closed: + next = states[0] + } + if state.n1 != next.n0 { + strokePathJoin(sty, &rhs, &lhs, hw, state.p1, state.n1, next.n0, state.r1, next.r0) + } + } + } + + if closed { + rhs.close() + lhs.close() + return rhs, lhs + } + + qbeg := &states[0] + qend := &states[len(states)-1] + + // Default to counter-clockwise direction. + lhs = lhs.reverse() + strokePathCap(sty, &rhs, hw, qend.p1, qend.n1) + + rhs = rhs.append(lhs) + strokePathCap(sty, &rhs, hw, qbeg.p0, qbeg.n0.Mul(-1)) + + rhs.close() + + return rhs, nil +} + +func (qs *strokeQuads) close() { +} + +// ccw returns whether the path is counter-clockwise. +func (qs strokeQuads) ccw() bool { + // Use the Shoelace formula: + // https://en.wikipedia.org/wiki/Shoelace_formula + var area float32 + for _, ps := range qs.split() { + for i := 1; i < len(ps); i++ { + pi := ps[i].quad.To + pj := ps[i-1].quad.To + area += (pi.X - pj.X) * (pi.Y + pj.Y) + } + } + return area <= 0.0 +} + +func (qs strokeQuads) reverse() strokeQuads { + if len(qs) == 0 { + return nil + } + + ps := make(strokeQuads, 0, len(qs)) + for i := range qs { + q := qs[len(qs)-1-i] + q.quad.To, q.quad.From = q.quad.From, q.quad.To + ps = append(ps, q) + } + + return ps +} + +func (qs strokeQuads) append(ps strokeQuads) strokeQuads { + switch { + case len(ps) == 0: + return qs + case len(qs) == 0: + return ps + } + return append(qs, ps...) +} + +// strokePathNorm returns the normal vector at t. +func strokePathNorm(p0, p1, p2 f32.Point, t, d float32) f32.Point { + switch t { + case 0: + n := p1.Sub(p0) + if n.X == 0 && n.Y == 0 { + return f32.Point{} + } + n = rot90CW(n) + return normPt(n, d) + case 1: + n := p2.Sub(p1) + if n.X == 0 && n.Y == 0 { + return f32.Point{} + } + n = rot90CW(n) + return normPt(n, d) + } + panic("impossible") +} + +func rot90CW(p f32.Point) f32.Point { return f32.Pt(+p.Y, -p.X) } +func rot90CCW(p f32.Point) f32.Point { return f32.Pt(-p.Y, +p.X) } + +func normPt(p f32.Point, l float32) f32.Point { + d := math.Hypot(float64(p.X), float64(p.Y)) + l64 := float64(l) + if math.Abs(d-l64) < 1e-10 { + return f32.Point{} + } + n := float32(l64 / d) + return f32.Point{X: p.X * n, Y: p.Y * n} +} + +func dotPt(p, q f32.Point) float32 { + return p.X*q.X + p.Y*q.Y +} + +func perpDot(p, q f32.Point) float32 { + return p.X*q.Y - p.Y*q.X +} + +// strokePathCurv returns the curvature at t, along the quadratic Bézier +// curve defined by the triplet (beg, ctl, end). +func strokePathCurv(beg, ctl, end f32.Point, t float32) float32 { + var ( + d1p = quadBezierD1(beg, ctl, end, t) + d2p = quadBezierD2(beg, ctl, end, t) + + // Negative when bending right, ie: the curve is CW at this point. + a = float64(perpDot(d1p, d2p)) + ) + + // We check early that the segment isn't too line-like and + // save a costly call to math.Pow that will be discarded by dividing + // with a too small 'a'. + if math.Abs(a) < 1e-10 { + return float32(math.NaN()) + } + return float32(math.Pow(float64(d1p.X*d1p.X+d1p.Y*d1p.Y), 1.5) / a) +} + +// quadBezierSample returns the point on the Bézier curve at t. +// B(t) = (1-t)^2 P0 + 2(1-t)t P1 + t^2 P2 +func quadBezierSample(p0, p1, p2 f32.Point, t float32) f32.Point { + t1 := 1 - t + c0 := t1 * t1 + c1 := 2 * t1 * t + c2 := t * t + + o := p0.Mul(c0) + o = o.Add(p1.Mul(c1)) + o = o.Add(p2.Mul(c2)) + return o +} + +// quadBezierD1 returns the first derivative of the Bézier curve with respect to t. +// B'(t) = 2(1-t)(P1 - P0) + 2t(P2 - P1) +func quadBezierD1(p0, p1, p2 f32.Point, t float32) f32.Point { + p10 := p1.Sub(p0).Mul(2 * (1 - t)) + p21 := p2.Sub(p1).Mul(2 * t) + + return p10.Add(p21) +} + +// quadBezierD2 returns the second derivative of the Bézier curve with respect to t: +// B''(t) = 2(P2 - 2P1 + P0) +func quadBezierD2(p0, p1, p2 f32.Point, t float32) f32.Point { + p := p2.Sub(p1.Mul(2)).Add(p0) + return p.Mul(2) +} + +func strokeQuadBezier(state strokeState, d, flatness float32) strokeQuads { + // Gio strokes are only quadratic Bézier curves, w/o any inflection point. + // So we just have to flatten them. + var qs strokeQuads + return flattenQuadBezier(qs, state.p0, state.ctl, state.p1, d, flatness) +} + +// flattenQuadBezier splits a Bézier quadratic curve into linear sub-segments, +// themselves also encoded as Bézier (degenerate, flat) quadratic curves. +func flattenQuadBezier(qs strokeQuads, p0, p1, p2 f32.Point, d, flatness float32) strokeQuads { + var t float32 + for t < 1 { + s2 := float64((p2.X-p0.X)*(p1.Y-p0.Y) - (p2.Y-p0.Y)*(p1.X-p0.X)) + den := math.Hypot(float64(p1.X-p0.X), float64(p1.Y-p0.Y)) + if s2*den == 0.0 { + break + } + + s2 /= den + flat64 := float64(flatness) + t = 2.0 * float32(math.Sqrt(flat64/3.0/math.Abs(s2))) + if t >= 1.0 { + break + } + var q0, q1, q2 f32.Point + q0, q1, q2, p0, p1, p2 = quadBezierSplit(p0, p1, p2, t) + qs.addLine(q0, q1, q2, 0, d) + } + qs.addLine(p0, p1, p2, 1, d) + return qs +} + +func (qs *strokeQuads) addLine(p0, ctrl, p1 f32.Point, t, d float32) { + p0 = p0.Add(strokePathNorm(p0, ctrl, p1, 0, d)) + p1 = p1.Add(strokePathNorm(p0, ctrl, p1, 1, d)) + + *qs = append(*qs, + strokeQuad{ + quad: ops.Quad{ + From: p0, + Ctrl: p0.Add(p1).Mul(0.5), + To: p1, + }, + }, + ) +} + +// quadInterp returns the interpolated point at t. +func quadInterp(p, q f32.Point, t float32) f32.Point { + return f32.Pt( + (1-t)*p.X+t*q.X, + (1-t)*p.Y+t*q.Y, + ) +} + +// quadBezierSplit returns the pair of triplets (from,ctrl,to) Bézier curve, +// split before (resp. after) the provided parametric t value. +func quadBezierSplit(p0, p1, p2 f32.Point, t float32) (f32.Point, f32.Point, f32.Point, f32.Point, f32.Point, f32.Point) { + + var ( + b0 = p0 + b1 = quadInterp(p0, p1, t) + b2 = quadBezierSample(p0, p1, p2, t) + + a0 = b2 + a1 = quadInterp(p1, p2, t) + a2 = p2 + ) + + return b0, b1, b2, a0, a1, a2 +} + +// strokePathJoin joins the two paths rhs and lhs, according to the provided +// stroke style sty. +func strokePathJoin(sty clip.StrokeStyle, rhs, lhs *strokeQuads, hw float32, pivot, n0, n1 f32.Point, r0, r1 float32) { + strokePathBevelJoin(rhs, lhs, hw, pivot, n0, n1, r0, r1) +} + +func strokePathBevelJoin(rhs, lhs *strokeQuads, hw float32, pivot, n0, n1 f32.Point, r0, r1 float32) { + + rp := pivot.Add(n1) + lp := pivot.Sub(n1) + + rhs.lineTo(rp) + lhs.lineTo(lp) +} + +// strokePathCap caps the provided path qs, according to the provided stroke style sty. +func strokePathCap(sty clip.StrokeStyle, qs *strokeQuads, hw float32, pivot, n0 f32.Point) { + switch sty.Cap { + case clip.FlatCap: + strokePathFlatCap(qs, hw, pivot, n0) + case clip.SquareCap: + strokePathSquareCap(qs, hw, pivot, n0) + default: + panic("impossible") + } +} + +// strokePathFlatCap caps the start or end of a path with a flat cap. +func strokePathFlatCap(qs *strokeQuads, hw float32, pivot, n0 f32.Point) { + end := pivot.Sub(n0) + qs.lineTo(end) +} + +// strokePathSquareCap caps the start or end of a path with a square cap. +func strokePathSquareCap(qs *strokeQuads, hw float32, pivot, n0 f32.Point) { + var ( + e = pivot.Add(rot90CCW(n0)) + corner1 = e.Add(n0) + corner2 = e.Sub(n0) + end = pivot.Sub(n0) + ) + + qs.lineTo(corner1) + qs.lineTo(corner2) + qs.lineTo(end) +} diff --git a/internal/opconst/ops.go b/internal/opconst/ops.go index c901ac8f..59b31508 100644 --- a/internal/opconst/ops.go +++ b/internal/opconst/ops.go @@ -47,7 +47,7 @@ const ( TypePushLen = 1 TypePopLen = 1 TypeAuxLen = 1 - TypeClipLen = 1 + 4*4 + TypeClipLen = 1 + 4*4 + 4 + 1 TypeProfileLen = 1 ) diff --git a/internal/rendertest/clip_test.go b/internal/rendertest/clip_test.go index d006d79c..c20c6dc0 100644 --- a/internal/rendertest/clip_test.go +++ b/internal/rendertest/clip_test.go @@ -102,3 +102,87 @@ func TestPaintClippedTexture(t *testing.T) { r.expect(25, 35, colornames.Blue) }) } + +func TestStrokedPathBevelFlat(t *testing.T) { + run(t, func(o *op.Ops) { + const width = 2.5 + sty := clip.StrokeStyle{ + Cap: clip.FlatCap, + } + + p := new(clip.Path) + p.Begin(o) + p.Move(f32.Pt(10, 50)) + p.Line(f32.Pt(10, 0)) + p.Arc(f32.Pt(10, 0), f32.Pt(20, 0), math.Pi) + p.Line(f32.Pt(10, 0)) + p.Line(f32.Pt(10, 10)) + p.Arc(f32.Pt(0, 30), f32.Pt(0, 30), 2*math.Pi) + p.Line(f32.Pt(-20, 0)) + p.Quad(f32.Pt(-10, -10), f32.Pt(-30, 30)) + p.Stroke(width, sty).Add(o) + + paint.Fill(o, colornames.Red) + }, func(r result) { + r.expect(0, 0, colornames.White) + r.expect(10, 50, colornames.Red) + }) +} + +func TestStrokedPathBevelSquare(t *testing.T) { + run(t, func(o *op.Ops) { + const width = 2.5 + sty := clip.StrokeStyle{ + Cap: clip.SquareCap, + } + + p := new(clip.Path) + p.Begin(o) + p.Move(f32.Pt(10, 50)) + p.Line(f32.Pt(10, 0)) + p.Arc(f32.Pt(10, 0), f32.Pt(20, 0), math.Pi) + p.Line(f32.Pt(10, 0)) + p.Line(f32.Pt(10, 10)) + p.Arc(f32.Pt(0, 30), f32.Pt(0, 30), 2*math.Pi) + p.Line(f32.Pt(-20, 0)) + p.Quad(f32.Pt(-10, -10), f32.Pt(-30, 30)) + p.Stroke(width, sty).Add(o) + + paint.Fill(o, colornames.Red) + }, func(r result) { + r.expect(0, 0, colornames.White) + r.expect(10, 50, colornames.Red) + }) +} + +func TestStrokedPathZeroWidth(t *testing.T) { + run(t, func(o *op.Ops) { + const width = 2 + var sty clip.StrokeStyle + { + p := new(clip.Path) + p.Begin(o) + p.Move(f32.Pt(10, 50)) + p.Line(f32.Pt(50, 0)) + p.Stroke(width, sty).Add(o) + + paint.Fill(o, colornames.Black) + } + + { + p := new(clip.Path) + p.Begin(o) + p.Move(f32.Pt(10, 50)) + p.Line(f32.Pt(30, 0)) + p.Stroke(0, sty).Add(o) // width=0, disable stroke + + paint.Fill(o, colornames.Red) + } + + }, func(r result) { + r.expect(0, 0, colornames.White) + r.expect(10, 50, colornames.Black) + r.expect(30, 50, colornames.Black) + r.expect(65, 50, colornames.White) + }) +} diff --git a/internal/rendertest/refs/TestStrokedPathBevelFlat.png b/internal/rendertest/refs/TestStrokedPathBevelFlat.png new file mode 100644 index 00000000..861b57f7 Binary files /dev/null and b/internal/rendertest/refs/TestStrokedPathBevelFlat.png differ diff --git a/internal/rendertest/refs/TestStrokedPathBevelSquare.png b/internal/rendertest/refs/TestStrokedPathBevelSquare.png new file mode 100644 index 00000000..597cd496 Binary files /dev/null and b/internal/rendertest/refs/TestStrokedPathBevelSquare.png differ diff --git a/internal/rendertest/refs/TestStrokedPathZeroWidth.png b/internal/rendertest/refs/TestStrokedPathZeroWidth.png new file mode 100644 index 00000000..1d47f68d Binary files /dev/null and b/internal/rendertest/refs/TestStrokedPathZeroWidth.png differ diff --git a/op/clip/clip.go b/op/clip/clip.go index 71224527..35d13b50 100644 --- a/op/clip/clip.go +++ b/op/clip/clip.go @@ -39,6 +39,8 @@ func (p *Path) Pos() f32.Point { return p.pen } type Op struct { call op.CallOp bounds image.Rectangle + width float32 // Width of the stroked path, 0 for outline paths. + style StrokeStyle // Style of the stroked path, 0 for outline paths. } func (p Op) Add(o *op.Ops) { @@ -50,6 +52,8 @@ func (p Op) Add(o *op.Ops) { bo.PutUint32(data[5:], uint32(p.bounds.Min.Y)) bo.PutUint32(data[9:], uint32(p.bounds.Max.X)) bo.PutUint32(data[13:], uint32(p.bounds.Max.Y)) + bo.PutUint32(data[17:], math.Float32bits(p.width)) + data[21] = uint8(p.style.Cap) } // Begin the path, storing the path data and final Op into ops. @@ -321,6 +325,26 @@ func (p *Path) Outline() Op { } } +// Stroke returns a stroked path with the specified width +// and configuration. +// If the provided width is <= 0, the path won't be stroked. +func (p *Path) Stroke(width float32, sty StrokeStyle) Op { + if width <= 0 { + // Explicitly discard the macro to ignore the path. + p.macro.Stop() + return Op{ + call: op.Record(p.ops).Stop(), + } + } + + c := p.macro.Stop() + return Op{ + call: c, + width: width, + style: sty, + } +} + // Rect represents the clip area of a pixel-aligned rectangle. type Rect image.Rectangle diff --git a/op/clip/stroke.go b/op/clip/stroke.go new file mode 100644 index 00000000..c85fd49b --- /dev/null +++ b/op/clip/stroke.go @@ -0,0 +1,23 @@ +// SPDX-License-Identifier: Unlicense OR MIT + +package clip + +// StrokeStyle describes how a stroked path should be drawn. +// StrokeStyle zero value draws a Bevel-joined and Flat-capped stroked path. +type StrokeStyle struct { + Cap StrokeCap +} + +// StrokeCap describes the head or tail of a stroked path. +type StrokeCap uint8 + +const ( + // FlatCap caps stroked paths with a flat cap, joining the right-hand + // and left-hand sides of a stroked path with a straight line. + FlatCap StrokeCap = iota + + // SquareCap caps stroked paths with a square cap, joining the right-hand + // and left-hand sides of a stroked path with a half square of length + // the stroked path's width. + SquareCap +)