lucas.orth/skrift-directus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Vorschau-Kuli: Strichstaerke 1.4 + dezenter Wobble-Filter (feTurbulence/Displacement) fuer echte Kugelschreiber-Optik; im <img>-Kontext getestet (kein Blank)

Browse Source
This commit is contained in:
Lucas Orth
2026-08-24 13:39:18 +02:00
parent bc94bcbaa5
commit 246359f545
1 changed files with 14 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
extensions/directus-extension-skrift-neuauftrag/dist/index.js vendored
View File

@@ -324,17 +324,22 @@ const NeuAuftrag = defineComponent({
const sel = (val, opts, on, extra) => h('select', { style: WSELECT + 'width:100%;' + (extra || ''), value: val, onChange: on },
opts.map((o) => h('option', { value: o.v, selected: String(val) === String(o.v) }, o.t)));
const svgUri = (svg) => { try { return 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svg))); } catch { return null; } };
// Vorschau-Optik „Kugelschreiber" (nur Anzeige/Download): blaue Tinte mit
// leichter Deckkraft, etwas dickere Striche. WICHTIG: vector-effect=
// "non-scaling-stroke" MUSS bleiben – die Glyphen-Pfade haben eigene
// transform-Skalierungen; ohne non-scaling wird die Strichbreite winzig
// (Text verschwindet). Papier bleibt weiß. Produktion bleibt schwarz.
// Vorschau-Optik „Kugelschreiber" (nur Anzeige/Download): blaue Tinte, etwas
// dickere Striche (1.4) und ein dezenter „Wobble" (feTurbulence + Displacement)
// für die typische, leicht unruhige Kuli-Linie. Im Browser (auch als <img>)
// getestet. WICHTIG: vector-effect="non-scaling-stroke" MUSS bleiben – die
// Glyphen-Pfade haben eigene transform-Skalierungen; ohne non-scaling wird die
// Strichbreite winzig (Text verschwindet). Weißer Grund. Produktion bleibt schwarz.
const BALLPOINT = '#1a2a6c';
const inkify = (svg) => (typeof svg === 'string'
? svg
const inkify = (svg) => {
if (typeof svg !== 'string') return svg;
return svg
.replace(/stroke="#0{3,6}"/gi, `stroke="${BALLPOINT}" stroke-opacity="0.95"`)
.replace(/stroke-width="0\.6"/gi, 'stroke-width="1.7"')
: svg);
.replace(/stroke-width="0\.6"/gi, 'stroke-width="1.4"')
.replace(/(<svg[^>]*>)/i, '$1<defs><filter id="skink" x="-4%" y="-4%" width="108%" height="108%" color-interpolation-filters="sRGB"><feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="1" seed="4" result="n"/><feDisplacementMap in="SourceGraphic" in2="n" scale="1.3" xChannelSelector="R" yChannelSelector="G"/></filter></defs>')
.replace(/(<rect[^>]*fill="#FFFFFF"[^>]*\/>)/i, '$1<g filter="url(#skink)">')
.replace(/<\/svg>\s*$/i, '</g></svg>');
};
// Vorschau als PNG speichern (wie in der App); Fallback: SVG.
function bildSpeichern(d) {
const svg = d && typeof d.svg === 'string' ? inkify(d.svg) : null;