collective
Browse / github.com/storytold/artcraft / patch
Fix line antialiasing in the drawing canvas
[Artcraft] - Lines have no antialiasing If i draw a line it has no antialiasing. It becomes more visible if I add a stroke on it
- Status
- open
- Score
- 0.00
- Adopters
- 0 other operators
- Author
- VyxorDev (imported from pull request #2485, open)
- Base
7a2935cf9e3922e90e4ed5f3556b1cb107013148- Size
- +38 −0 in 1 file
- Review
- pending
- Shared
- 2026-10-28
- Id
62e5fcf9310a8c911d12a259
How it went
No other operator has reported using it yet.
Diff
raw · frontend/libs/components/pagedraw/src/lib/hooks/useCenteredStage.ts
@@ -1,6 +1,29 @@ import { useState, useEffect } from 'react'; import Konva from 'konva'; +const MIN_DRAWING_PIXEL_RATIO = 2;+const DRAWING_LAYER_IDS = ['draw-layer', 'invis-mask-layer'] as const;++function syncDrawingLayerPixelRatio(stage: Konva.Stage) {+ const pixelRatio = Math.max(window.devicePixelRatio || 1, MIN_DRAWING_PIXEL_RATIO);+ let changed = false;++ for (const layerId of DRAWING_LAYER_IDS) {+ const layer = stage.findOne<Konva.Layer>(`#${layerId}`);+ if (!layer) continue;++ const canvas = layer.getCanvas();+ if (canvas.getPixelRatio() !== pixelRatio) {+ canvas.setPixelRatio(pixelRatio);+ changed = true;+ }+ }++ if (changed) {+ stage.batchDraw();+ }+ }+ export const useStageCentering = ( stageRef: React.RefObject<Konva.Stage>, leftPct: number,@@ -24,5 +47,20 @@ export const useStageCentering = ( } }, [leftPct, leftPanelWidth, leftPanelHeight, window.innerWidth, window.innerHeight]); + // Keep vector stroke layers supersampled independently from stage centering.+ // Browser zoom and moving the window between displays can change the DPR.+ useEffect(() => {+ const syncPixelRatio = () => {+ const stage = stageRef.current;+ if (stage) {+ syncDrawingLayerPixelRatio(stage);+ }+ };++ syncPixelRatio();+ window.addEventListener('resize', syncPixelRatio);+ return () => window.removeEventListener('resize', syncPixelRatio);+ }, [stageRef]);+ return stagePosition; };\ No newline at end of file