首页 技术 正文
技术 2022年11月23日
0 收藏 668 点赞 2,803 浏览 3523 个字

SVG & getBBox

https://developer.mozilla.org/en-US/docs/Web/API/SVGGraphicsElement/getBBox

  const paths = [...svgDOM.querySelectorAll('path')];
paths.sort((p1, p2) => {
let bbox1 = p1.getBBox();
let bbox2 = p2.getBBox();
// area size ???
return bbox1.width * bbox1.height > bbox2.width * bbox2.height ? -1 : 1;
});

demo

https://codepen.io/xgqfrms/pen/dyPxWmx

<?xml version="1.0" encoding="UTF-8"?>
<svg width="503px" height="201px" viewBox="0 0 503 201" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 53 (72520) - https://sketchapp.com -->
<title>Untitled</title>
<desc>Created with Sketch.</desc>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Group" stroke="#979797">
<path d="M4.38721467,1.4235713 C59.7165062,1.54698994 115.052053,0.918023607 170.375089,1.79382724 C227.433418,2.69710179 249.992895,63.9728163 239.941091,114.442228 C235.910943,134.677325 212.350177,157.135741 196.017797,167.282477 C164.156433,187.076828 70.6314282,142.459532 58.182101,137.795924 C38.324153,130.356993 31.9738723,115.324132 23.3896517,95.5788692 C9.10509367,62.7217974 3.34577363,43.8445274 1.25793506,10.0733803 L4.38721467,1.4235713 Z" id="Path"></path>
<path d="M472.25,76.3671875 C449.049028,101.903828 427.709436,153.150454 449.261719,185.628906 C459.747498,201.430568 500.227095,209.243672 501.375,181.515625 C502.37375,157.390456 502.225265,133.208983 501.375,109.078125 C500.481543,83.7214536 481.523964,92.0067994 466.945312,77.5078125" id="Path-2" fill="#D65252"></path>
</g>
</g>
</svg>

const addSVG = (svg) => {
this.bgSVG = svg;
// 插入 svg
let div = document.createElement('div');
div.innerHTML = svg;
let styleTag = div.querySelectorAll('style')[0];
if (styleTag) {
Style.parse(styleTag.innerHTML);
}
let polygons = Array.prototype.slice.apply(div.querySelectorAll('polygon'))
let polylines = Array.prototype.slice.apply(div.querySelectorAll('polyline'))
let paths = Array.prototype.slice.apply(div.querySelectorAll('path'))
let rects = Array.prototype.slice.apply(div.querySelectorAll('rect'))
let texts = Array.prototype.slice.apply(div.querySelectorAll('text')) paths.sort((p1, p2) => {
let bbox1 = p1.getBBox()
let bbox2 = p2.getBBox()
return bbox1.width * bbox1.height > bbox2.width * bbox2.height ? -1 : 1
}).forEach((p) => {
let result = []
let pathData = p.getAttribute('d');
// STEP1: path to points
let points = pathDataToPolys(pathData, {tolerance: 1, decimals: 1})[0];
console.log(`points`, points);
// debugger;
result = points.map(p => new Point(p[0], p[1]));
// result = points.map((p) => {
// log(p[0], p[1])
// return new Point(p[0], p[1])
// })
// STEP2: points to polygons
let polygon = new Polygon(result);
let fill = Polygon.getFillColorFromNode(p);
polygon.fill = fill; // 存储 Features
if (result.length) {
this.$store.dispatch('addFeature', polygon);
}
}) polygons.forEach((p) => {
let polygon = Polygon.fromSVG(p)
this.$store.dispatch('addFeature', polygon)
}) polylines.forEach((p) => {
let polygon = Polygon.fromSVG(p)
this.$store.dispatch('addFeature', polygon)
}) // 存储 texts
texts.forEach((text) => {
var transform = text.getAttribute('transform')
var matrixTransform = transform && transform.match(/^matrix\(([^)se]+)\)$/i)
matrixTransform = matrixTransform && matrixTransform[1]
var transformX = matrixTransform ? +matrixTransform.split(' ')[4] : 0
var transformY = matrixTransform ? +matrixTransform.split(' ')[5] : 0
var x = +text.getAttribute('x')
var y = +text.getAttribute('y') if (x === 0 && y === 0) {
var tspan = text.getElementsByTagName('tspan')[0]
if (tspan) {
x = +tspan.getAttribute('x')
y = +tspan.getAttribute('y')
}
} this.$store.dispatch('addText', {
text: text.textContent.trim(),
coordinate: new Point(transformX + x, transformY + y)
})
}) rects.forEach((r) => {
let polygon = Polygon.fromRect(r)
this.$store.dispatch('addFeature', polygon)
})
};

微信扫一扫

支付宝扫一扫

本文网址:https://www.zhankr.net/141188.html

相关推荐
python开发_常用的python模块及安装方法
adodb:我们领导推荐的数据库连接组件bsddb3:BerkeleyDB的连接组件Cheetah-1.0:我比较喜欢这个版本的cheeta…
日期:2022-11-24 点赞:875 阅读:5,067
Educational Codeforces Round 11 C. Hard Process 二分
C. Hard Process题目连接:http://www.codeforces.com/contest/660/problem/CDes…
日期:2022-11-24 点赞:806 阅读:3,504
下载Ubuntn 17.04 内核源代码
zengkefu@server1:/usr/src$ uname -aLinux server1 4.10.0-19-generic #21…
日期:2022-11-24 点赞:565 阅读:4,312
可用Active Desktop Calendar V7.86 注册码序列号
可用Active Desktop Calendar V7.86 注册码序列号Name: www.greendown.cn Code: &nb…
日期:2022-11-24 点赞:730 阅读:4,307
Android调用系统相机、自定义相机、处理大图片
Android调用系统相机和自定义相机实例本博文主要是介绍了android上使用相机进行拍照并显示的两种方式,并且由于涉及到要把拍到的照片显…
日期:2022-11-24 点赞:512 阅读:4,904
Struts的使用
一、Struts2的获取  Struts的官方网站为:http://struts.apache.org/  下载完Struts2的jar包,…
日期:2022-11-24 点赞:671 阅读:3,097
发表评论
暂无评论

还没有评论呢,快来抢沙发~

助力内容变现

将您的收入提升到一个新的水平

点击联系客服

在线时间:8:00-16:00

客服电话

400-888-8888

客服邮箱

ceotheme@ceo.com

扫描二维码

关注微信公众号

扫描二维码

手机访问本站