PrivateCoffee/tldraw
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

Improves arrow draw stroke

Browse source
This commit is contained in:
Steve Ruiz 2021-07-08 13:26:55 +01:00
parent 64fa2a19b1
commit 1ca69951de
2 changed files with 18 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
state/shape-styles.ts
View file

@ -1,4 +1,3 @@
import { SVGProps } from 'react'
import { ColorStyle, DashStyle, ShapeStyles, SizeStyle } from 'types' import { ColorStyle, DashStyle, ShapeStyles, SizeStyle } from 'types'
export const strokes: Record<ColorStyle, string> = { export const strokes: Record<ColorStyle, string> = {
@ -58,9 +57,11 @@ export function getFontStyle(scale: number, style: ShapeStyles): string {
return `${fontSize * scale}px/1.4 Verveine Regular` return `${fontSize * scale}px/1.4 Verveine Regular`
} }
export function getShapeStyle( export function getShapeStyle(style: ShapeStyles): {
style: ShapeStyles stroke: string
): Partial<SVGProps<SVGUseElement>> { fill: string
strokeWidth: number
} {
const { color, size, isFilled } = style const { color, size, isFilled } = style
const strokeWidth = getStrokeWidth(size) const strokeWidth = getStrokeWidth(size)

28
state/shape-utils/arrow.tsx
View file

@ -112,7 +112,7 @@ const arrow = registerShapeUtils<ArrowShape>({
const styles = getShapeStyle(style) const styles = getShapeStyle(style)
const strokeWidth = +styles.strokeWidth const { strokeWidth } = styles
const arrowDist = vec.dist(start.point, end.point) const arrowDist = vec.dist(start.point, end.point)
@ -587,24 +587,22 @@ function renderCurvedFreehandArrowShaft(shape: ArrowShape, circle: number[]) {
const points: number[][] = [] const points: number[][] = []
for (let i = 0; i < 14; i++) { for (let i = 0; i < 21; i++) {
const t = i / 13 const t = i / 20
const angle = lerpAngles(startAngle, endAngle, t) const angle = lerpAngles(startAngle, endAngle, t)
points.push(vec.round(vec.nudgeAtAngle(center, angle, radius))) points.push(vec.round(vec.nudgeAtAngle(center, angle, radius)))
} }
const stroke = getStroke( const stroke = getStroke([...points, end.point, end.point], {
[...points, end.point, end.point, end.point, end.point], size: strokeWidth / 2,
{ thinning: 0.5 + getRandom() * 0.3,
size: strokeWidth / 2, easing: (t) => t * t,
thinning: 0.5 + getRandom() * 0.3, end: { taper: 0 },
easing: (t) => t * t, start: { taper: 1 + 32 * (st * st * st) },
end: { taper: 1 }, simulatePressure: true,
start: { taper: 1 + 32 * (st * st * st) }, streamline: 0.01,
simulatePressure: true, last: true,
last: true, })
}
)
const path = getSvgPathFromStroke(stroke) const path = getSvgPathFromStroke(stroke)