twc/ludus
4
0
Fork 0
Code Issues 36 Pull Requests Packages Projects 8 Releases Wiki Activity

fix svg rendering

Browse Source
This commit is contained in:
Scott Richmond 2025-01-11 15:31:18 -05:00
parent d833db3b2d
commit 7477f3f59a
1 changed files with 12 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
build/ludus.mjs
View File

@ -218,6 +218,10 @@ function turn_to_deg (heading) {
return (heading % 1) * 360 return (heading % 1) * 360
} }
function hex (n) {
return n.toString(16).padStart(2, "0")
}
function svg_render_line (prev, curr) { function svg_render_line (prev, curr) {
if (!prev.pendown) return "" if (!prev.pendown) return ""
if (eq_vect(prev.position, curr.position)) return "" if (eq_vect(prev.position, curr.position)) return ""
@ -225,7 +229,7 @@ function svg_render_line (prev, curr) {
const {position: [x2, y2]} = curr const {position: [x2, y2]} = curr
const [r, g, b, a] = resolve_color(pencolor) const [r, g, b, a] = resolve_color(pencolor)
return ` return `
<line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="rgb(${r} ${g} ${b})" stroke-opacity="${a/255}" stroke-width="${penwidth}"/> <line x1="${x1}" y1="${y1}" x2="${x2}" y2="${y2}" stroke="#${hex(r)}${hex(g)}${hex(b)}" stroke-linecap="square" stroke-opacity="${a/255}" stroke-width="${penwidth}"/>
` `
} }
@ -269,10 +273,10 @@ function svg_render_turtle (state) {
const [x3, y3] = rotate(origin, -turtle_angle) const [x3, y3] = rotate(origin, -turtle_angle)
const [pr, pg, pb, pa] = resolve_color(pencolor) const [pr, pg, pb, pa] = resolve_color(pencolor)
const pen_alpha = pa/255 const pen_alpha = pa/255
const ink = pendown ? `<line x1="${x1}" y1="${y1}" x2="0" y2="0" stroke="rgb(${pr} ${pg} ${pb})" stroke-opacity="${pen_alpha}" stroke-width="${penwidth}" />` : "" const ink = pendown ? `<line x1="${x1}" y1="${y1}" x2="0" y2="0" stroke="#${hex(pr)}${hex(pg)}${hex(pb)}" stroke-linecap="round" stroke-opacity="${pen_alpha}" stroke-width="${penwidth}" />` : ""
return ` return `
<g transform="translate(${x}, ${y})rotate(${-turn_to_deg(heading)})"> <g transform="translate(${x}, ${y})rotate(${-turn_to_deg(heading)})">
<polygon points="${x1} ${y1} ${x2} ${y2} ${x3} ${y3}" stroke="none" fill="rgb(${fr} ${fg} ${fb})" fill-opacity="${fill_alpha}"/> <polygon points="${x1} ${y1} ${x2} ${y2} ${x3} ${y3}" stroke="none" fill="#${hex(fr)}${hex(fg)}${hex(fb)})" fill-opacity="${fill_alpha}"/>
${ink} ${ink}
</g> </g>
` `
@ -300,15 +304,14 @@ export function svg (commands) {
const view_width = (maxX - minX) * 1.2 const view_width = (maxX - minX) * 1.2
const view_height = (maxY - minY) * 1.2 const view_height = (maxY - minY) * 1.2
const margin = Math.max(view_width, view_height) * 0.1 const margin = Math.max(view_width, view_height) * 0.1
const x1 = minX - margin const x_origin = minX - margin
// don't actually need these: const y_origin = -maxY - margin
// const y1 = minY - margin
// const x2 = maxX + margin
const y2 = maxY + margin
const path = svg_render_path(states) const path = svg_render_path(states)
const turtle = svg_render_turtle(states[states.length - 1]) const turtle = svg_render_turtle(states[states.length - 1])
return `<?xml version="1.0" standalone="no"?> return `<?xml version="1.0" standalone="no"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" style="background-color:rgb(${r} ${g} ${b}); background-opacity: ${a/255}" viewBox="${x1} ${-y2} ${view_width} ${view_height}"> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="${x_origin} ${y_origin} ${view_width} ${view_height}">
<rect x="${x_origin - 5}" y="${y_origin - 5}" width="${view_width + 10}" height="${view_height + 10}" fill="#${hex(r)}${hex(g)}${hex(b)}" stroke-width="0" paint-order="fill" />
<g transform="scale(-1, 1) rotate(180)"> <g transform="scale(-1, 1) rotate(180)">
${path} ${path}