github/motion-canvas
1
1
Fork 0
mirror of https://github.com/motion-canvas/motion-canvas.git synced 2026-01-13 15:58:10 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(2d): add antialiased signal to Shape (#282)

Browse Source
This commit is contained in:
DJ
2023-02-11 02:28:57 -05:00
committed by GitHub
parent a975c5a987
commit 7c6905d72c
1 changed files with 9 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
packages/2d/src/components/Shape.ts
View File

@@ -24,6 +24,7 @@ export interface ShapeProps extends LayoutProps {
lineCap?: SignalValue<CanvasLineCap>;
lineDash?: SignalValue<number>[];
lineDashOffset?: SignalValue<number>;
antialiased?: SignalValue<boolean>;
}
export abstract class Shape extends Layout {
@@ -49,6 +50,9 @@ export abstract class Shape extends Layout {
@initial(0)
@signal()
public declare readonly lineDashOffset: SimpleSignal<number, this>;
@initial(true)
@signal()
public declare readonly antialiased: SimpleSignal<boolean, this>;
protected readonly rippleStrength = createSignal<number, this>(0);
@@ -69,6 +73,11 @@ export abstract class Shape extends Layout {
context.lineCap = this.lineCap();
context.setLineDash(this.lineDash());
context.lineDashOffset = this.lineDashOffset();
if (!this.antialiased()) {
// from https://stackoverflow.com/a/68372384
context.filter =
'url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxmaWx0ZXIgaWQ9ImZpbHRlciIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgY29sb3ItaW50ZXJwb2xhdGlvbi1maWx0ZXJzPSJzUkdCIj48ZmVDb21wb25lbnRUcmFuc2Zlcj48ZmVGdW5jUiB0eXBlPSJpZGVudGl0eSIvPjxmZUZ1bmNHIHR5cGU9ImlkZW50aXR5Ii8+PGZlRnVuY0IgdHlwZT0iaWRlbnRpdHkiLz48ZmVGdW5jQSB0eXBlPSJkaXNjcmV0ZSIgdGFibGVWYWx1ZXM9IjAgMSIvPjwvZmVDb21wb25lbnRUcmFuc2Zlcj48L2ZpbHRlcj48L3N2Zz4=#filter)';
}
}
protected override draw(context: CanvasRenderingContext2D) {