Improves arrow draw stroke

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

View file

@ -1,4 +1,3 @@
import { SVGProps } from 'react'
import { ColorStyle, DashStyle, ShapeStyles, SizeStyle } from 'types'
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`
}
export function getShapeStyle(
style: ShapeStyles
): Partial<SVGProps<SVGUseElement>> {
export function getShapeStyle(style: ShapeStyles): {
stroke: string
fill: string
strokeWidth: number
} {
const { color, size, isFilled } = style
const strokeWidth = getStrokeWidth(size)

View file

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