import { ElMessage } from 'element-plus' import { parse } from 'svgson' import JsonToView from './view' const TAU = Math.PI * 2 let StyleClasse = '' const mapToEllipse = ({ x, y }, rx, ry, cosphi, sinphi, centerx, centery) => { x *= rx y *= ry const xp = cosphi * x - sinphi * y const yp = sinphi * x + cosphi * y return { x: xp + centerx, y: yp + centery } } const approxUnitArc = (ang1, ang2) => { // If 90 degree circular arc, use a constant // as derived from http://spencermortensen.com/articles/bezier-circle const a = ang2 === 1.5707963267948966 ? 0.551915024494 : ang2 === -1.5707963267948966 ? -0.551915024494 : (4 / 3) * Math.tan(ang2 / 4) const x1 = Math.cos(ang1) const y1 = Math.sin(ang1) const x2 = Math.cos(ang1 + ang2) const y2 = Math.sin(ang1 + ang2) return [ { x: x1 - y1 * a, y: y1 + x1 * a }, { x: x2 + y2 * a, y: y2 - x2 * a }, { x: x2, y: y2 } ] } const vectorAngle = (ux, uy, vx, vy) => { const sign = ux * vy - uy * vx < 0 ? -1 : 1 let dot = ux * vx + uy * vy if (dot > 1) { dot = 1 } if (dot < -1) { dot = -1 } return sign * Math.acos(dot) } const getArcCenter = ( px, py, cx, cy, rx, ry, largeArcFlag, sweepFlag, sinphi, cosphi, pxp, pyp ) => { const rxsq = Math.pow(rx, 2) const rysq = Math.pow(ry, 2) const pxpsq = Math.pow(pxp, 2) const pypsq = Math.pow(pyp, 2) let radicant = rxsq * rysq - rxsq * pypsq - rysq * pxpsq if (radicant < 0) { radicant = 0 } radicant /= rxsq * pypsq + rysq * pxpsq radicant = Math.sqrt(radicant) * (largeArcFlag === sweepFlag ? -1 : 1) const centerxp = ((radicant * rx) / ry) * pyp const centeryp = ((radicant * -ry) / rx) * pxp const centerx = cosphi * centerxp - sinphi * centeryp + (px + cx) / 2 const centery = sinphi * centerxp + cosphi * centeryp + (py + cy) / 2 const vx1 = (pxp - centerxp) / rx const vy1 = (pyp - centeryp) / ry const vx2 = (-pxp - centerxp) / rx const vy2 = (-pyp - centeryp) / ry let ang1 = vectorAngle(1, 0, vx1, vy1) let ang2 = vectorAngle(vx1, vy1, vx2, vy2) if (sweepFlag === 0 && ang2 > 0) { ang2 -= TAU } if (sweepFlag === 1 && ang2 < 0) { ang2 += TAU } return [centerx, centery, ang1, ang2] } const arcToBezier = ({ px, py, cx, cy, rx, ry, xAxisRotation = 0, largeArcFlag = 0, sweepFlag = 0 }) => { const curves: any = [] if (rx === 0 || ry === 0) { return [] } const sinphi = Math.sin((xAxisRotation * TAU) / 360) const cosphi = Math.cos((xAxisRotation * TAU) / 360) const pxp = (cosphi * (px - cx)) / 2 + (sinphi * (py - cy)) / 2 const pyp = (-sinphi * (px - cx)) / 2 + (cosphi * (py - cy)) / 2 if (pxp === 0 && pyp === 0) { return [] } rx = Math.abs(rx) ry = Math.abs(ry) const lambda = Math.pow(pxp, 2) / Math.pow(rx, 2) + Math.pow(pyp, 2) / Math.pow(ry, 2) if (lambda > 1) { rx *= Math.sqrt(lambda) ry *= Math.sqrt(lambda) } let [centerx, centery, ang1, ang2] = getArcCenter( px, py, cx, cy, rx, ry, largeArcFlag, sweepFlag, sinphi, cosphi, pxp, pyp ) // If 'ang2' == 90.0000000001, then `ratio` will evaluate to // 1.0000000001. This causes `segments` to be greater than one, which is an // unecessary split, and adds extra points to the bezier curve. To alleviate // this issue, we round to 1.0 when the ratio is close to 1.0. let ratio = Math.abs(ang2) / (TAU / 4) if (Math.abs(1.0 - ratio) < 0.0000001) { ratio = 1.0 } const segments = Math.max(Math.ceil(ratio), 1) ang2 /= segments for (let i = 0; i < segments; i++) { curves.push(approxUnitArc(ang1, ang2)) ang1 += ang2 } return curves.map(curve => { const { x: x1, y: y1 } = mapToEllipse( curve[0], rx, ry, cosphi, sinphi, centerx, centery ) const { x: x2, y: y2 } = mapToEllipse( curve[1], rx, ry, cosphi, sinphi, centerx, centery ) const { x, y } = mapToEllipse( curve[2], rx, ry, cosphi, sinphi, centerx, centery ) return { x1, y1, x2, y2, x, y } }) } const SvgToShape = (oBJht, file = undefined, URL = undefined, callback: any = undefined) => { let refX = 0 let refY = 0 let scaleX: any = 1 let scaleY: any = 1 const set16ToRgb = str => { var reg = /^#([0-9A-Fa-f]{3}|[0-9A-Fa-f]{6})$/ if (!reg.test(str)) { return str } let newStr = str.toLowerCase().replace(/\#/g, '') let len = newStr.length if (len == 3) { let t = '' for (var i = 0; i < len; i++) { t += newStr.slice(i, i + 1).concat(newStr.slice(i, i + 1)) } newStr = t } let arr: any = [] //将字符串分隔，两个两个的分隔 for (var i = 0; i < 6; i = i + 2) { let s = newStr.slice(i, i + 2) arr.push(parseInt('0x' + s)) } return 'rgb(' + arr.join(',') + ')' } //hex -> rgba const hexToRgba = (hex, opacity) => { hex && hex.toLowerCase() !hex && (hex = '#000') if (hex === 'none') return undefined return rgbToRgba(set16ToRgb(hex), opacity) } const rgbToRgba = (color, alp = 1) => { let rgbaAttr = color.match(/[\d.]+/g) if (rgbaAttr && rgbaAttr.length >= 3) { let r, g, b r = rgbaAttr[0] g = rgbaAttr[1] b = rgbaAttr[2] return 'rgba(' + r + ',' + g + ',' + b + ',' + alp + ')' } return 'rgba(0,0,0,' + alp + ')' } // X偏量 const X = value => { const v = Number(value) || 0 return (v - refX) / (scaleX === undefined ? 1 : scaleX) } // Y偏量 const Y = value => { const v = Number(value) || 0 return (v - refY) / (scaleY === undefined ? 1 : scaleY) } const k: any = { modified: new Date().toString(), comps: [], background: undefined, width: 512, height: 512 } const trim = function (x) { return x.replace(/^\s+|\s+$/g, '') } const compressSpaces = function (x) { return x.replace(/[\s\r\t\n]+/gm, ' ') } function Rect2path(x, y, width, height, rx, ry) { /* * rx 和 ry 的规则是： * 1. 如果其中一个设置为 0 则圆角不生效 * 2. 如果有一个没有设置则取值为另一个 */ rx = rx || ry || 0; ry = ry || rx || 0; //非数值单位计算，如当宽度像100%则移除 if (isNaN(x - y + width - height + rx - ry)) return; rx = rx > width / 2 ? width / 2 : rx; ry = ry > height / 2 ? height / 2 : ry; //如果其中一个设置为 0 则圆角不生效 if (0 == rx || 0 == ry) { // var path = // 'M' + x + ' ' + y + // 'H' + (x + width) + 不推荐用绝对路径，相对路径节省代码量 // 'V' + (y + height) + // 'H' + x + // 'z'; var path = 'M' + x + ' ' + y + 'h' + width + 'v' + height + 'h' + -width + 'z'; } else { var path = 'M' + x + ' ' + (y + ry) + 'a' + rx + ' ' + ry + ' 0 0 1 ' + rx + ' ' + (-ry) + 'h' + (width - rx - rx) + 'a' + rx + ' ' + ry + ' 0 0 1 ' + rx + ' ' + ry + 'v' + (height - ry - ry) + 'a' + rx + ' ' + ry + ' 0 0 1 ' + (-rx) + ' ' + ry + 'h' + (rx + rx - width) + 'a' + rx + ' ' + ry + ' 0 0 1 ' + (-rx) + ' ' + (-ry) + 'z'; } return path; } const CreateDefalutShape = (comp, attributes) => { let style = {} if (attributes) for (const key in attributes) { if (Object.prototype.hasOwnProperty.call(attributes, key)) { const element = attributes[key] style[key] = element } } if (attributes && attributes.style) { const S = attributes.style .replace( /(\/\*([^*]|[\r\n]|(\*+([^*\/]|[\r\n])))*\*+\/)|(^[\s]*\/\/.*)/gm, '' ) .replace(/[\s\r\t\n]+/gm, ' ') .split(';') S && S.forEach(ele => { ele = trim(compressSpaces((ele || '').replace(/,/g, ' '))) var sv = ele.split(':') if (sv && sv.length === 2) style[sv[0]] = sv[1] }) } if ('fill' in style) comp.background = hexToRgba(style['fill'], Number(style['fill-opacity'] === undefined ? 1 : style['fill-opacity'])) || undefined if ('stroke' in style) comp.borderColor = hexToRgba(style['stroke'], Number(style['stroke-opacity'] === undefined ? 1 : style['stroke-opacity'])) || undefined if ('opacity' in style) comp.opacity = Number(style['opacity']) if ('stroke-width' in style) comp.borderWidth = style['stroke-width'] === undefined ? 1 : style['stroke-width'] if (attributes?.class) { function configobj(arr) { const result = {} if (arr && arr.length > 0) { let currentKey = "" let currentValue = "" for (let i = 0; i < arr.length; i++) { if (arr[i]) { currentKey = arr[i].match(/([^:;]\S[^:;]+)(?=\:)/)[0] currentValue = arr[i].match(/(?<=\:)([^:;]\S[^:;]+)/)[0] } result[currentKey] = currentValue } } return result } var sls = StyleClasse.match(/(\w*?-\w*)\s+\{\s+(\w*)\:\s+.?\w*.?\s+\}/g) || StyleClasse.match(/(?<=\.).*?\}/g) sls && sls.forEach(element => { var r = RegExp(".*" + attributes.class + ".*", "i"); if (r.test(element)) { var val = element.substring(element.indexOf('{') + 1, element.length).replace(/}/g, '').replace(/\s/g, "").match(/([^;]\S[^;]+)\:([^;]\S[^;]+)/g) var values = configobj(val) if (values) { if ('fill' in values) comp.background = hexToRgba(values['fill'], Number(values['fill-opacity'] === undefined ? 1 : style['fill-opacity'])) || undefined if ('stroke' in values) comp.borderColor = hexToRgba(values['stroke'], Number(values['stroke-opacity'] === undefined ? 1 : style['stroke-opacity'])) || undefined if ('opacity' in values) comp.opacity = Number(values['opacity']) } } }); } comp.pixelPerfect = true return comp } const parseText = (k, ele) => { let style = {} if (ele.attributes) for (const key in ele.attributes) { if (Object.prototype.hasOwnProperty.call(ele.attributes, key)) { const element = ele.attributes[key] style[key] = element } } const fontsize = style['font-size'] === undefined ? 24 : style['font-size'] let txt = '' if (ele.children) ele.children.forEach(e => { txt += e.value || '' }) let text: any = CreateDefalutShape( { type: 'text', rect: [ X(ele.attributes.x), Y(ele.attributes.y), (X(fontsize) * (txt.length === undefined ? 1 : txt.length)) / 2, Y(fontsize) ], text: txt, color: hexToRgba( style['fill'] || '#000', Number(style['fill-opacity'] === undefined ? 1 : style['fill-opacity']) ) || undefined, font: style['font-size'] + ' ' + style['font-family'] }, undefined ) if ('opacity' in style) text.opacity = Number(style['opacity']) // text.rotation = style['transform'] k.comps.push(text) } // 多线段 const parsepolygon = (k, ele) => { let style = {} if (ele.attributes) for (const key in ele.attributes) { if (Object.prototype.hasOwnProperty.call(ele.attributes, key)) { const element = ele.attributes[key] style[key] = element } } let points: any = [] if (!style['points']) return const lpoint = style['points'].split(' ') let indexkey = 0 lpoint.forEach(e => { const p = e.split(',') if (p && p.length === 2) points.push(X(p[0])), points.push(Y(p[1])) if (p && p.length === 1) { indexkey % 2 === 0 && points.push(X(p[0])), indexkey % 2 !== 0 && points.push(Y(p[0])), indexkey++ } }) let text: any = CreateDefalutShape( { type: 'shape', points: points }, undefined ) if ('fill' in style) text.background = hexToRgba(style['fill'], Number(style['fill-opacity'] === undefined ? 1 : style['fill-opacity'])) || undefined if ('stroke-linejoin' in style) text.borderJoin = style['stroke-linejoin'] if ('stroke-linecap' in style) text.orderCap = style['stroke-linecap'] if ('stroke' in style) text.borderColor = hexToRgba(style['stroke'], Number(style['stroke-opacity'] === undefined ? 1 : style['stroke-opacity'])) || undefined if ('opacity' in style) text.opacity = Number(style['opacity']) text.borderWidth = style['stroke-width'] === undefined ? 1 : style['stroke-width'] k.comps.push(text) } const parseImage = (k, ele) => { let style = {} if (ele.attributes) for (const key in ele.attributes) { if (Object.prototype.hasOwnProperty.call(ele.attributes, key)) { const element = ele.attributes[key] style[key] = element } } let text: any = CreateDefalutShape( { type: 'image', rect: [ X(ele.attributes.x), Y(ele.attributes.y), X(style['width']), Y(style['height']) ], name: style['href'] }, undefined ) if ('opacity' in style) text.opacity = Number(style['opacity']) if ( ele.attributes.x !== undefined && ele.attributes.y !== undefined && style['width'] !== undefined && style['height'] !== undefined && style['href'] ) k.comps.push(text) } // 添加线 const parseline = (k, ele) => { let style = {} if (ele.attributes) for (const key in ele.attributes) { if (Object.prototype.hasOwnProperty.call(ele.attributes, key)) { const element = ele.attributes[key] style[key] = element } } if (style['x1'] && style['y1'] && style['x2'] && style['y2']) k.comps.push( CreateDefalutShape( { type: 'shape', points: [ X(style['x1']), Y(style['y1']), X(style['x2']), Y(style['y2']) ], opacity: Number(style['opacity'] === undefined ? 1 : style['opacity']), borderColor: hexToRgba( style['stroke'], Number(style['stroke-opacity'] === undefined ? 1 : style['stroke-opacity']) ) || undefined, borderWidth: style['stroke-width'] === undefined ? 1 : style['stroke-width'] }, undefined ) ) } // 转换形状 const parepath = (k, ele) => { let style = {} if (ele.attributes) for (const key in ele.attributes) { if (Object.prototype.hasOwnProperty.call(ele.attributes, key)) { const element = ele.attributes[key] style[key] = element } } if (!style['d']) return let S = style['d'] S = S.replace(/,/gm, ' ') for (var r = 0; r < 2; r++) S = S.replace(/([MmZzLlHhVvCcSsQqTtAa])([^\s])/gm, '$1 $2') ; (S = S.replace(/([^\s])([MmZzLlHhVvCcSsQqTtAa])/gm, '$1 $2')), (S = S.replace(/([0-9])([+\-])/gm, '$1 $2')) for (var r = 0; r < 2; r++) S = S.replace(/(\.[0-9]*)(\.)/gm, '$1 $2') ; (S = S.replace(/([Aa](\s+[0-9]+){3})\s+([01])\s*([01])/gm, '$1 $3 $4 ')), (S = compressSpaces(S)), (S = trim(S)) let points: any = [] let segments: any = [] // 获取数据 const GetPathData = () => { let lastkey = '' //本次key let M_lastkey = '' // 上一次key let lastpoint = { x: 0, y: 0 } let controlpoint = { x: 0, y: 0 } let lastindex = 0 let A1 = 0, A2 = 0, A3 = 0, A4 = 0, A5 = 0, A6 = 0, A7 = 0, c1 = 0, c2 = 0 const Path = (key, points) => { if ( [ 'm', 'l', 'h', 'v', 'c', 's', 'q', 't', 'a', 'z', 'M', 'L', 'H', 'V', 'C', 'S', 'Q', 'T', 'A', 'Z' ].indexOf(key) > -1 ) { switch (key) { case 'Z': case 'z': segments.push(5) break } lastindex = 0 M_lastkey = lastkey lastkey = key return } const keylst = ['c', 's', 't', 'q'] if (lastkey && key != undefined) switch (lastkey) { case 'M': lastindex % 2 === 0 && lastindex === 0 && (segments.push(1), (lastpoint.x = Number(key)), points.push(X(lastpoint.x))) lastindex % 2 === 0 && lastindex > 1 && (segments.push(2), (lastpoint.x = Number(key)), points.push(X(lastpoint.x))) lastindex % 2 !== 0 && ((lastpoint.y = Number(key)), points.push(Y(lastpoint.y))) break case 'm': lastindex % 2 === 0 && lastindex === 0 && (segments.push(1), (lastpoint.x += Number(key)), points.push(X(lastpoint.x))) lastindex % 2 === 0 && lastindex > 1 && (segments.push(2), (lastpoint.x += Number(key)), points.push(X(lastpoint.x))) lastindex % 2 !== 0 && ((lastpoint.y += Number(key)), points.push(Y(lastpoint.y))) break case 'L': lastindex % 2 === 0 && (segments.push(2), (lastpoint.x = Number(key)), points.push(X(lastpoint.x))) lastindex % 2 !== 0 && ((lastpoint.y = Number(key)), points.push(Y(lastpoint.y))) break case 'l': lastindex % 2 === 0 && (segments.push(2), (lastpoint.x += Number(key)), points.push(X(lastpoint.x))) lastindex % 2 !== 0 && ((lastpoint.y += Number(key)), points.push(Y(lastpoint.y))) break case 'H': lastindex % 2 === 0 && (segments.push(2), (lastpoint.x = Number(key)), points.push(X(lastpoint.x)), points.push(Y(lastpoint.y))) break case 'h': lastindex % 2 === 0 && (segments.push(2), (lastpoint.x += Number(key)), points.push(X(lastpoint.x)), points.push(Y(lastpoint.y))) break case 'V': lastindex % 2 === 0 && (segments.push(2), (lastpoint.y = Number(key)), points.push(X(lastpoint.x)), points.push(Y(lastpoint.y))) break case 'v': lastindex % 2 === 0 && (segments.push(2), (lastpoint.y += Number(key)), points.push(X(lastpoint.x)), points.push(Y(lastpoint.y))) break case 'C': lastindex % 2 === 0 && points.push(X(key)) lastindex % 2 !== 0 && points.push(Y(key)) if (lastindex % 6 === 4) lastpoint.x = Number(key) if (lastindex % 6 === 5) lastpoint.y = Number(key) if (lastindex % 6 === 0) segments.push(4) if (lastindex % 6 === 2) controlpoint.x = Number(key) if (lastindex % 6 === 3) controlpoint.y = Number(key) break case 'c': lastindex % 2 === 0 && points.push(X(lastpoint.x + Number(key))) lastindex % 2 !== 0 && points.push(Y(lastpoint.y + Number(key))) if (lastindex % 6 === 2) controlpoint.x = lastpoint.x + Number(key) if (lastindex % 6 === 3) controlpoint.y = lastpoint.y + Number(key) if (lastindex % 6 === 4) lastpoint.x += Number(key) if (lastindex % 6 === 5) lastpoint.y += Number(key) if (lastindex % 6 === 0) segments.push(4) if (lastindex % 6 === 2) controlpoint.x = lastpoint.x + Number(key) if (lastindex % 6 === 3) controlpoint.y = lastpoint.y + Number(key) break case 'S': lastindex % 4 === 0 && (points.push( X( keylst.indexOf(M_lastkey.toLowerCase()) < 0 ? lastpoint.x : 2 * lastpoint.x - controlpoint.x ) ), points.push( Y( keylst.indexOf(M_lastkey.toLowerCase()) < 0 ? lastpoint.y : 2 * lastpoint.y - controlpoint.y ) )) lastindex % 2 === 0 && points.push(X(key)) lastindex % 2 !== 0 && points.push(Y(key)) if (lastindex % 4 === 0) controlpoint.x = Number(key) if (lastindex % 4 === 1) controlpoint.y = Number(key) if (lastindex % 4 === 2) lastpoint.x = Number(key) if (lastindex % 4 === 3) lastpoint.y = Number(key) if (lastindex % 4 === 0) segments.push(4) break case 's': lastindex % 4 === 0 && (points.push( X( keylst.indexOf(M_lastkey.toLowerCase()) < 0 ? lastpoint.x : 2 * lastpoint.x - controlpoint.x ) ), points.push( Y( keylst.indexOf(M_lastkey.toLowerCase()) < 0 ? lastpoint.y : 2 * lastpoint.y - controlpoint.y ) )) lastindex % 2 === 0 && points.push(X(lastpoint.x + Number(key))) lastindex % 2 !== 0 && points.push(Y(lastpoint.y + Number(key))) if (lastindex % 4 === 0) controlpoint.x = lastpoint.x + Number(key) if (lastindex % 4 === 1) controlpoint.y = lastpoint.y + Number(key) if (lastindex % 4 === 2) lastpoint.x += Number(key) if (lastindex % 4 === 3) lastpoint.y += Number(key) if (lastindex % 4 === 0) segments.push(4) break case 'Q': case 'T': lastindex % 2 === 0 && points.push(X(key)) lastindex % 2 !== 0 && points.push(Y(key)) if (lastindex % 4 === 2) lastpoint.x = Number(key) if (lastindex % 4 === 3) lastpoint.y = Number(key) if (lastindex % 4 === 0) segments.push(3) break case 'q': case 't': lastindex % 2 === 0 && points.push(X(lastpoint.x + Number(key))) lastindex % 2 !== 0 && points.push(Y(lastpoint.y + Number(key))) if (lastindex % 4 === 0) controlpoint.x = lastpoint.x + Number(key) if (lastindex % 4 === 1) controlpoint.y = lastpoint.y + Number(key) if (lastindex % 4 === 2) lastpoint.x += Number(key) if (lastindex % 4 === 3) lastpoint.y += Number(key) if (lastindex % 4 === 0) segments.push(3) case 'A': if (lastindex % 7 === 0) (A1 = Number(key)), (c1 = lastpoint.x), (c2 = lastpoint.y) if (lastindex % 7 === 1) A2 = Number(key) if (lastindex % 7 === 2) A3 = Number(key) * (Math.PI / 180) if (lastindex % 7 === 3) A4 = Number(key) if (lastindex % 7 === 4) A5 = Number(key) if (lastindex % 7 === 5) (lastpoint.x = Number(key)), (A6 = lastpoint.x) if (lastindex % 7 === 6) (lastpoint.y = Number(key)), (A7 = lastpoint.y) if (lastindex % 7 === 6) { const x = (Math.cos(A3) * (c1 - A6)) / 2 + (Math.sin(A3) * (c2 - A7)) / 2 const y = (-Math.sin(A3) * (c1 - A6)) / 2 + (Math.cos(A3) * (c2 - A7)) / 2 const M = Math.pow(x, 2) / Math.pow(A1, 2) + Math.pow(y, 2) / Math.pow(A2, 2) M < 1e-6 && (segments.push(2), points.push(X(lastpoint.x)), points.push(Y(lastpoint.y))) if (!(M < 1e-6)) { const curves = arcToBezier({ px: c1, py: c2, cx: A6, cy: A7, rx: A1, ry: A2, xAxisRotation: A3, largeArcFlag: A4, sweepFlag: A5 }) curves && curves.forEach(c => { c && (segments.push(4), points.push(X(c['x1'])), points.push(Y(c['y1'])), points.push(X(c['x2'])), points.push(Y(c['y2'])), points.push(X(c['x'])), points.push(Y(c['y']))) }) } } break case 'a': if (lastindex % 7 === 0) (A1 = Number(key)), (c1 = lastpoint.x), (c2 = lastpoint.y) if (lastindex % 7 === 1) A2 = Number(key) if (lastindex % 7 === 2) A3 = Number(key) * (Math.PI / 180) if (lastindex % 7 === 3) A4 = Number(key) if (lastindex % 7 === 4) A5 = Number(key) if (lastindex % 7 === 5) (lastpoint.x += Number(key)), (A6 = lastpoint.x) if (lastindex % 7 === 6) (lastpoint.y += Number(key)), (A7 = lastpoint.y) if (lastindex % 7 === 6) { const x = (Math.cos(A3) * (c1 - A6)) / 2 + (Math.sin(A3) * (c2 - A7)) / 2 const y = (-Math.sin(A3) * (c1 - A6)) / 2 + (Math.cos(A3) * (c2 - A7)) / 2 const M = Math.pow(x, 2) / Math.pow(A1, 2) + Math.pow(y, 2) / Math.pow(A2, 2) M < 1e-6 && (segments.push(2), points.push(X(lastpoint.x)), points.push(Y(lastpoint.y))) if (!(M < 1e-6)) { const curves = arcToBezier({ px: c1, py: c2, cx: A6, cy: A7, rx: A1, ry: A2, xAxisRotation: A3, largeArcFlag: A4, sweepFlag: A5 }) curves && curves.forEach(c => { c && (segments.push(4), points.push(X(c['x1'])), points.push(Y(c['y1'])), points.push(X(c['x2'])), points.push(Y(c['y2'])), points.push(X(c['x'])), points.push(Y(c['y']))) }) } } break default: break } lastindex++ } const tonkes = S.split(' ') tonkes.forEach((element, _index) => { Path(element, points) }) } GetPathData() let text: any = CreateDefalutShape( { type: 'shape', points: points, segments: segments }, undefined ) if ('fill' in style) { text.background = hexToRgba( style['fill'], Number(style['fill-opacity'] === undefined ? 1 : style['fill-opacity']) ) } else { text.background = hexToRgba('#000', Number(style['fill-opacity'] === undefined ? 1 : style['fill-opacity'])) } if ('stroke-linejoin' in style) text.borderJoin = style['stroke-linejoin'] if ('stroke-linecap' in style) text.orderCap = style['stroke-linecap'] if ('stroke' in style) text.borderColor = hexToRgba(style['stroke'], Number(style['stroke-opacity'] === undefined ? 1 : style['stroke-opacity'])) || undefined if ('opacity' in style) text.opacity = Number(style['opacity'] === undefined ? 1 : style['opacity']) text.borderWidth = style['stroke-width'] === undefined ? 1 : style['stroke-width'] if (ele?.attributes?.class) { function configobj(arr) { const result = {} if (arr && arr.length > 0) { let currentKey = "" let currentValue = "" for (let i = 0; i < arr.length; i++) { if (arr[i]) { currentKey = arr[i].match(/([^:;]\S[^:;]+)(?=\:)/)[0] currentValue = arr[i].match(/(?<=\:)([^:;]\S[^:;]+)/)[0] } result[currentKey] = currentValue } } return result } var sls = StyleClasse.match(/(\w*?-\w*)\s+\{\s+(\w*)\:\s+.?\w*.?\s+\}/g) || StyleClasse.match(/(?<=\.).*?\}/g) sls && sls.forEach(element => { var r = RegExp(".*" + ele.attributes.class + ".*", "i"); if (r.test(element)) { var val = element.substring(element.indexOf('{') + 1, element.length).replace(/}/g, '').replace(/\s/g, "").match(/([^;]\S[^;]+)\:([^;]\S[^;]+)/g) var values = configobj(val) if (values) { if ('fill' in values) { text.background = hexToRgba( values['fill'], Number(values['fill-opacity'] === undefined ? 1 : values['fill-opacity']) ) } if ('stroke-linejoin' in values) text.borderJoin = values['stroke-linejoin'] if ('stroke-linecap' in values) text.orderCap = values['stroke-linecap'] if ('stroke' in values) text.borderColor = hexToRgba(values['stroke'], Number(values['stroke-opacity'] === undefined ? 1 : values['stroke-opacity'])) || undefined if ('opacity' in values) text.opacity = Number(values['opacity'] === undefined ? 1 : values['opacity']) text.borderWidth = values['stroke-width'] === undefined ? 1 : values['stroke-width'] } } }); } k.comps.push(text) } let linearGradient_list: any = [] let linearGradient_comp: any // 渐变色 const linearGradient = ele => { if (ele && ele.attributes && ele.attributes.id) { linearGradient_comp = new Object() linearGradient_comp.id = ele.attributes.id ele.attributes.x1 && (linearGradient_comp.x1 = X(ele.attributes.x1)) ele.attributes.y1 && (linearGradient_comp.y1 = Y(ele.attributes.y1)) ele.attributes.x2 && (linearGradient_comp.x2 = X(ele.attributes.x2)) ele.attributes.y2 && (linearGradient_comp.y2 = Y(ele.attributes.y2)) linearGradient_comp.styles = [] linearGradient_list.push(linearGradient_comp) } ele.children && ele.children.forEach(element => { element.attributes && linearGradient_comp.styles.push({ offset: element.attributes.offset, color: element.attributes.style }) }) } //样式 const parseClass = (val, defs: any = undefined) => { if (val && val.value) { StyleClasse += val.value } val && val.children && val.children.forEach(o => parseClass(o)) if (defs) { // 样式对象 } } const parseSvg = (k, list, _value = undefined) => { list && list.forEach((ele, _index) => { if (ele.type === 'element' && ele.name === 'style') { // 样式 parseClass(ele) } if (ele.type === 'element' && ele.name === 'linearGradient') { // 渐变色 linearGradient(ele) } if (ele.type === 'element' && ele.name === 'text') { parseText(k, ele) return } if (ele.children && ele.children.length > 0) { parseSvg(k, ele.children, ele.value) } else if (ele.attributes) { switch (ele.name || ele.type) { case 'g': parseSvg(k, ele.children, ele.value) break case 'circle': k.comps.push( CreateDefalutShape( { type: 'circle', rect: [ X(ele.attributes.cx) - X(ele.attributes.r), Y(ele.attributes.cy) - Y(ele.attributes.r), X(ele.attributes.r) * 2, Y(ele.attributes.r) * 2 ] }, ele.attributes ) ) break case 'rect': ele.attributes.d = Rect2path(X(ele.attributes.x), Y(ele.attributes.y), X(ele.attributes.width), Y(ele.attributes.height), X(ele.attributes.rx), Y(ele.attributes.ry)) parepath(k, ele) break case 'ellipse': // ele.attributes.d = Ellipse2path(X(ele.attributes.cx), Y(ele.attributes.cy), X(ele.attributes.rx), Y(ele.attributes.ry)) // parepath(k, ele) k.comps.push( CreateDefalutShape( { type: 'oval', rect: [ X(ele.attributes.cx) - X(ele.attributes.rx), Y(ele.attributes.cy) - Y(ele.attributes.ry), X(ele.attributes.rx) * 2, Y(ele.attributes.ry) * 2 ] }, ele.attributes ) ) break case 'path': parepath(k, ele) break case 'polygon': parsepolygon(k, ele) break case 'line': parseline(k, ele) break case 'image': parseImage(k, ele) break default: break } } }) } StyleClasse = '' URL && ht.Default.xhrLoad(URL, text => { parse(text) .then(json => { const ToNumberArray = function (x) { for ( var S = trim(compressSpaces((x || '').replace(/,/g, ' '))).split( ' ' ), r = 0; r < S.length; r++ ) S[r] = parseFloat(S[r]) return S } json.attributes && ((k.width = Number(json.attributes.width === undefined ? 512 : json.attributes.width)), (k.height = Number(json.attributes.height === undefined ? 512 : json.attributes.height))) if (json.attributes.viewBox) { const viewBox = ToNumberArray(json.attributes.viewBox) scaleX = (viewBox[2] - viewBox[0]) / k.width scaleY = (viewBox[3] - viewBox[1]) / k.height } refX = parseFloat(json.attributes.refX) || 0 refY = parseFloat(json.attributes.refY) || 0 json.children && parseClass(undefined, json.children.map(o => o.name === 'defs')) json.children && parseSvg(k, json.children) JsonToView(k, oBJht) }) .catch(error => { ElMessage({ type: 'error', message: error?.toString() }) }) }) file && parse(file) .then(json => { const ToNumberArray = function (x) { for ( var S = trim(compressSpaces((x || '').replace(/,/g, ' '))).split( ' ' ), r = 0; r < S.length; r++ ) S[r] = parseFloat(S[r]) return S } json.attributes && json.attributes.width && (k.width = Number( json.attributes.width.toLowerCase().replace('px', '') )) json.attributes && json.attributes.height && (k.height = Number( json.attributes.height.toLowerCase().replace('px', '') )) if (json.attributes.viewBox) { const viewBox = ToNumberArray(json.attributes.viewBox) scaleX = (viewBox[2] - viewBox[0]) / k.width scaleY = (viewBox[3] - viewBox[1]) / k.height } refX = parseFloat(json.attributes.refX) || 0 refY = parseFloat(json.attributes.refY) || 0 json.children && parseClass(undefined, json.children.filter(o => o.name === 'defs')) json.children && parseSvg(k, json.children) JsonToView(k, oBJht) callback && callback() }) .catch(error => { ElMessage({ type: 'error', message: error?.toString() }) }) } export default SvgToShape
