feat(web): inset token silhouette by 2px
Pass a negative offset through traceImage so the traced token shape sits slightly inside the artwork, hiding the anti-aliased fringe.
This commit is contained in:
+5
-1
@@ -20,13 +20,17 @@ export function searchWorkshop(q: string, page = 1): Promise<SearchResult> {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Trace an image into a vector shape, BSON-deserializing the proxy response.
|
* Trace an image into a vector shape, BSON-deserializing the proxy response.
|
||||||
* `mode` controls how the region is derived (`alpha`, `bw`, `color`).
|
* `mode` controls how the region is derived (`alpha`, `bw`, `color`); a
|
||||||
|
* non-zero `offset` insets (negative) or outsets (positive) the shape in
|
||||||
|
* pixels.
|
||||||
*/
|
*/
|
||||||
export async function traceImage(
|
export async function traceImage(
|
||||||
url: string,
|
url: string,
|
||||||
mode: 'alpha' | 'bw' | 'color' = 'alpha',
|
mode: 'alpha' | 'bw' | 'color' = 'alpha',
|
||||||
|
offset?: number,
|
||||||
): Promise<TraceResult> {
|
): Promise<TraceResult> {
|
||||||
const params = new URLSearchParams({ url, mode });
|
const params = new URLSearchParams({ url, mode });
|
||||||
|
if (offset !== undefined) params.set('offset', String(offset));
|
||||||
const res = await fetch(`${BASE}/trace?${params.toString()}`);
|
const res = await fetch(`${BASE}/trace?${params.toString()}`);
|
||||||
if (!res.ok) {
|
if (!res.ok) {
|
||||||
const body = (await res.json().catch(() => null)) as { error?: string } | null;
|
const body = (await res.json().catch(() => null)) as { error?: string } | null;
|
||||||
|
|||||||
@@ -14,6 +14,9 @@ import { assetUrl } from './assetUrl';
|
|||||||
|
|
||||||
const TOKEN_SIZE = 1.8;
|
const TOKEN_SIZE = 1.8;
|
||||||
|
|
||||||
|
/** How far (in trace pixels) the token silhouette is inset from the artwork. */
|
||||||
|
const TRACE_INSET = 2;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* A token: a short extruded shape with the texture on its top face. Uses
|
* A token: a short extruded shape with the texture on its top face. Uses
|
||||||
* `CustomImage.ImageURL` (falling back to `ImageSecondaryURL`), with a neutral
|
* `CustomImage.ImageURL` (falling back to `ImageSecondaryURL`), with a neutral
|
||||||
@@ -46,7 +49,7 @@ function TokenMesh({ url, thickness }: { url?: string; thickness: number }) {
|
|||||||
let cancelled = false;
|
let cancelled = false;
|
||||||
setTrace(null);
|
setTrace(null);
|
||||||
if (!url) return;
|
if (!url) return;
|
||||||
traceImage(url, 'alpha')
|
traceImage(url, 'alpha', -TRACE_INSET)
|
||||||
.then((result) => {
|
.then((result) => {
|
||||||
if (!cancelled && result.shape) {
|
if (!cancelled && result.shape) {
|
||||||
setTrace({
|
setTrace({
|
||||||
|
|||||||
Reference in New Issue
Block a user