VSinerva/freesewing
1
0
Fork 0
Code Activity

chore: Round coordinates when outputting SVG

Browse source
This commit is contained in:
Joost De Cock 2021-04-11 16:28:38 +02:00
parent 8924f2d40b
commit ac3894eaa9
2 changed files with 16 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

11
packages/core/src/path.js
View file

@ -7,7 +7,8 @@ import {
curvesIntersect, curvesIntersect,
pointOnLine, pointOnLine,
pointOnCurve, pointOnCurve,
curveEdge curveEdge,
round
} from './utils' } from './utils'
function Path(debug = false) { function Path(debug = false) {
@ -159,13 +160,15 @@ Path.prototype.asPathstring = function () {
for (let op of this.ops) { for (let op of this.ops) {
switch (op.type) { switch (op.type) {
case 'move': case 'move':
d += `M ${op.to.x},${op.to.y}` d += `M ${round(op.to.x)},${round(op.to.y)}`
break break
case 'line': case 'line':
d += ` L ${op.to.x},${op.to.y}` d += ` L ${round(op.to.x)},${round(op.to.y)}`
break break
case 'curve': case 'curve':
d += ` C ${op.cp1.x},${op.cp1.y} ${op.cp2.x},${op.cp2.y} ${op.to.x},${op.to.y}` d += ` C ${round(op.cp1.x)},${round(op.cp1.y)} ${round(op.cp2.x)},${round(
op.cp2.y
)} ${round(op.to.x)},${round(op.to.y)}`
break break
case 'close': case 'close':
d += ' z' d += ' z'

18
packages/core/src/svg.js
View file

@ -1,5 +1,5 @@
import Attributes from './attributes' import Attributes from './attributes'
import { round } from './utils'
import { version } from '../package.json' import { version } from '../package.json'
function Svg(pattern) { function Svg(pattern) {
@ -46,8 +46,8 @@ Svg.prototype.render = function (pattern) {
this.idPrefix = pattern.settings.idPrefix this.idPrefix = pattern.settings.idPrefix
this.runHooks('preRender') this.runHooks('preRender')
if (!pattern.settings.embed) { if (!pattern.settings.embed) {
this.attributes.add('width', pattern.width + 'mm') this.attributes.add('width', round(pattern.width) + 'mm')
this.attributes.add('height', pattern.height + 'mm') this.attributes.add('height', round(pattern.height) + 'mm')
} }
this.attributes.add('viewBox', `0 0 ${pattern.width} ${pattern.height}`) this.attributes.add('viewBox', `0 0 ${pattern.width} ${pattern.height}`)
this.head = this.renderHead() this.head = this.renderHead()
@ -197,8 +197,8 @@ Svg.prototype.renderText = function (point) {
} }
this.text = this.insertText(joint) this.text = this.insertText(joint)
} }
point.attributes.set('data-text-x', point.x) point.attributes.set('data-text-x', round(point.x))
point.attributes.set('data-text-y', point.y) point.attributes.set('data-text-y', round(point.y))
let lineHeight = point.attributes.get('data-text-lineheight') || 12 let lineHeight = point.attributes.get('data-text-lineheight') || 12
point.attributes.remove('data-text-lineheight') point.attributes.remove('data-text-lineheight')
let svg = `${this.nl()}<text ${point.attributes.renderIfPrefixIs('data-text-')}>` let svg = `${this.nl()}<text ${point.attributes.renderIfPrefixIs('data-text-')}>`
@ -208,7 +208,7 @@ Svg.prototype.renderText = function (point) {
let lines = this.text.split('\n') let lines = this.text.split('\n')
svg += `<tspan>${lines.shift()}</tspan>` svg += `<tspan>${lines.shift()}</tspan>`
for (let line of lines) { for (let line of lines) {
svg += `<tspan x="${point.x}" dy="${lineHeight}">${line}</tspan>` svg += `<tspan x="${round(point.x)}" dy="${lineHeight}">${line}</tspan>`
} }
} else { } else {
svg += `<tspan>${this.escapeText(this.text)}</tspan>` svg += `<tspan>${this.escapeText(this.text)}</tspan>`
@ -224,15 +224,15 @@ Svg.prototype.escapeText = function (text) {
} }
Svg.prototype.renderCircle = function (point) { Svg.prototype.renderCircle = function (point) {
return `<circle cx="${point.x}" cy="${point.y}" r="${point.attributes.get( return `<circle cx="${round(point.x)}" cy="${round(point.y)}" r="${point.attributes.get(
'data-circle' 'data-circle'
)}" ${point.attributes.renderIfPrefixIs('data-circle-')}></circle>` )}" ${point.attributes.renderIfPrefixIs('data-circle-')}></circle>`
} }
/** Returns SVG code for a snippet */ /** Returns SVG code for a snippet */
Svg.prototype.renderSnippet = function (snippet, part) { Svg.prototype.renderSnippet = function (snippet, part) {
let x = snippet.anchor.x let x = round(snippet.anchor.x)
let y = snippet.anchor.y let y = round(snippet.anchor.y)
let scale = snippet.attributes.get('data-scale') let scale = snippet.attributes.get('data-scale')
if (scale) { if (scale) {
snippet.attributes.add('transform', `translate(${x}, ${y})`) snippet.attributes.add('transform', `translate(${x}, ${y})`)