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

Vorschau-Kuli: non-scaling-stroke behalten (sonst Text unsichtbar), Striche 1.1 + blau, PNG in natuerlicher Groesse (Anzeige == Download), Papier weiss

Browse Source
This commit is contained in:
Lucas Orth
2026-08-24 13:24:38 +02:00
parent c3695ebd2a
commit 0587a94bee
1 changed files with 13 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -324,19 +324,17 @@ 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) – ins SVG geschrieben,
// damit Anzeige UND gespeichertes Bild identisch sind:
// • blaue Tinte mit leichter Deckkraft (Ink-Look),
// • mitskalierende Strichstärke (kein non-scaling → im großen PNG nicht dünn).
// Papier bleibt WEISS. Produktion (generierte/gecachte SVGs) bleibt schwarz.
// 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.
const BALLPOINT = '#1a2a6c';
const inkify = (svg) => {
if (typeof svg !== 'string') return svg;
return svg
const inkify = (svg) => (typeof svg === 'string'
? svg
.replace(/stroke="#0{3,6}"/gi, `stroke="${BALLPOINT}" stroke-opacity="0.92"`)
.replace(/\s*vector-effect="non-scaling-stroke"/gi, '')
.replace(/stroke-width="0\.6"/gi, 'stroke-width="2.0"');
};
.replace(/stroke-width="0\.6"/gi, 'stroke-width="1.1"')
: 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;
@@ -345,7 +343,10 @@ const NeuAuftrag = defineComponent({
const uri = svgUri(svg);
const img = new Image();
img.onload = () => {
const scale = 2;
// Natürliche Größe (nicht 2×): non-scaling-stroke wirkt konstant in
// Gerätepixeln – bei 2× würde die Linie relativ dünn wirken. So sieht
// das PNG aus wie die Großansicht.
const scale = 1;
const cv = document.createElement('canvas');
cv.width = (img.naturalWidth || 800) * scale; cv.height = (img.naturalHeight || 1130) * scale;
const ctx = cv.getContext('2d');