jeffemmett
/
folk-canvas
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

rename

This commit is contained in:
Orion Reed 2024-12-01 05:49:11 -05:00
parent c4a61f8dd8
commit 62454dcd8a
2 changed files with 9 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
demo/distance.html
View File

@ -20,7 +20,7 @@
position: absolute; position: absolute;
} }
cell-renderer canvas { distance-field canvas {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
@ -31,7 +31,7 @@
</style> </style>
</head> </head>
<body> <body>
<cell-renderer resolution="800" image-smoothing="true"> <distance-field>
<fc-geometry x="100" y="100" width="50" height="50"></fc-geometry> <fc-geometry x="100" y="100" width="50" height="50"></fc-geometry>
<fc-geometry x="100" y="200" width="50" height="50"></fc-geometry> <fc-geometry x="100" y="200" width="50" height="50"></fc-geometry>
<fc-geometry x="100" y="300" width="50" height="50"></fc-geometry> <fc-geometry x="100" y="300" width="50" height="50"></fc-geometry>
@ -39,14 +39,14 @@
<fc-geometry x="400" y="250" width="60" height="90"></fc-geometry> <fc-geometry x="400" y="250" width="60" height="90"></fc-geometry>
<fc-geometry x="200" y="400" width="100" height="100"></fc-geometry> <fc-geometry x="200" y="400" width="100" height="100"></fc-geometry>
<fc-geometry x="500" y="100" width="30" height="70"></fc-geometry> <fc-geometry x="500" y="100" width="30" height="70"></fc-geometry>
</cell-renderer> </distance-field>
<script type="module"> <script type="module">
import { FolkGeometry } from '../src/canvas/fc-geometry.ts'; import { FolkGeometry } from '../src/canvas/fc-geometry.ts';
import { CellRenderer } from '../src/distanceField/cellRenderer.ts'; import { DistanceField } from '../src/distanceField/distance-field.ts';
FolkGeometry.define(); FolkGeometry.define();
CellRenderer.define(); DistanceField.define();
</script> </script>
</body> </body>
</html> </html>

10
src/distanceField/cellRenderer.ts → src/distanceField/distance-field.ts
View File

@ -2,16 +2,14 @@ import type { FolkGeometry } from '../canvas/fc-geometry.ts';
import type { Vector2 } from '../utils/Vector2.ts'; import type { Vector2 } from '../utils/Vector2.ts';
import { Fields } from './fields.ts'; import { Fields } from './fields.ts';
export class CellRenderer extends HTMLElement { export class DistanceField extends HTMLElement {
static tagName = 'cell-renderer'; static tagName = 'distance-field';
static define() { static define() {
customElements.define(this.tagName, this); customElements.define(this.tagName, this);
} }
static observedAttributes = ['resolution', 'image-smoothing']; private canvas!: HTMLCanvasElement;
private canvas: HTMLCanvasElement;
private ctx: CanvasRenderingContext2D; private ctx: CanvasRenderingContext2D;
private offscreenCtx: CanvasRenderingContext2D; private offscreenCtx: CanvasRenderingContext2D;
private fields: Fields; private fields: Fields;
@ -24,7 +22,7 @@ export class CellRenderer extends HTMLElement {
constructor() { constructor() {
super(); super();
this.resolution = 2000; // default resolution this.resolution = 800; // default resolution
this.imageSmoothing = true; this.imageSmoothing = true;
this.fields = new Fields(this.resolution); this.fields = new Fields(this.resolution);