Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 4642d58

Browse files
committed
split out handle drawing
1 parent 0de87a4 commit 4642d58

File tree

2 files changed

+26
-10
lines changed

2 files changed

+26
-10
lines changed

‎demo/content.ts

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import {addCanvas, addTitle, colors, sizes} from "./internal/layout";
22
import {
33
calcBouncePercentage,
44
drawClosed,
5+
drawHandles,
56
drawLine,
67
drawOpen,
78
drawPoint,
@@ -274,7 +275,7 @@ addCanvas(
274275

275276
animate((frameTime) => {
276277
const percentage = calcBouncePercentage(period, timingFunctions.ease, frameTime);
277-
const rgen = rand(randSeed + Math.floor(frameTime/period) + "");
278+
const rgen = rand(randSeed + Math.floor(frameTime/period) + "");
278279

279280
// Draw original shape.
280281
tempStyles(
@@ -319,7 +320,13 @@ addCanvas(
319320
};
320321
const center: Coord = {x: width * 0.5, y: height * 0.5};
321322

322-
const polyBlob = centeredBlob(options, center).map(coordPoint);
323+
const blob = centeredBlob(options, center);
324+
const handles = mapPoints(blob, ({curr: p}) => {
325+
p.handleIn.length = 50;
326+
p.handleOut.length = 50;
327+
return p;
328+
});
329+
const polyBlob = blob.map(coordPoint);
323330

324331
// Draw polygon blob.
325332
tempStyles(
@@ -333,6 +340,9 @@ addCanvas(
333340
forPoints(polyBlob, ({prev, next}) => {
334341
drawLine(ctx, prev(), next(), 1, 2);
335342
});
343+
forPoints(handles, ({curr}) => {
344+
drawHandles(ctx, curr, 1);
345+
});
336346
},
337347
);
338348

‎demo/internal/canvas.ts

Lines changed: 14 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -123,24 +123,30 @@ export const drawClosed = (ctx: CanvasRenderingContext2D, points: Point[], handl
123123

124124
export const drawDebugClosed = (ctx: CanvasRenderingContext2D, points: Point[], size: number) => {
125125
forPoints(points, ({curr, next: nextFn}) => {
126-
const next = nextFn();
127-
const currHandle = expandHandle(curr, curr.handleOut);
128-
const nextHandle = expandHandle(next, next.handleIn);
126+
drawHandles(ctx, curr, size);
129127

130-
drawLine(ctx, curr, currHandle, size);
131-
drawLine(ctx, next, nextHandle, size, 2);
132-
drawPoint(ctx, currHandle, size * 1.4);
133-
drawPoint(ctx, nextHandle, size * 1.4);
128+
const next = nextFn();
129+
const currHandle = expandHandle(curr, curr.handleIn);
130+
const nextHandle = expandHandle(curr, curr.handleOut);
134131
const curve = new Path2D();
135132
curve.moveTo(curr.x, curr.y);
136133
curve.bezierCurveTo(currHandle.x, currHandle.y, nextHandle.x, nextHandle.y, next.x, next.y);
137134
ctx.lineWidth = sizes().pt * size * 2;
138135
ctx.stroke(curve);
136+
139137
drawPoint(ctx, curr, size * 1.1);
140-
drawPoint(ctx, next, size * 1.1);
141138
});
142139
};
143140

141+
export const drawHandles = (ctx: CanvasRenderingContext2D, point: Point, size: number) => {
142+
const inHandle = expandHandle(point, point.handleIn);
143+
const outHandle = expandHandle(point, point.handleOut);
144+
drawLine(ctx, point, inHandle, size);
145+
drawLine(ctx, point, outHandle, size, 2);
146+
drawPoint(ctx, inHandle, size * 1.4);
147+
drawPoint(ctx, outHandle, size * 1.4);
148+
};
149+
144150
export const drawOpen = (
145151
ctx: CanvasRenderingContext2D,
146152
start: Point,

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /