svg insert shape string bug
2024-10-08 05:25:05
svg insert shape string bug
not support custom
areaPropsattributes ???
const svg = document.querySelector(`[data-uuid="live_map_svg"]`);
svg.insertAdjacentHTML(`beforeend`, svgPolygon);
svgPolygon = `<polygon stroke="" fill="#DB524F" points="454.99798583984375 586.333984375 534.9979858398438 586.333984375 534.9979858398438 719.6680297851562 454.99798583984375 719.6680297851562" center='{"x":494.99798583984375,"y":653.0010070800781}' areaprops='{"id":10202,"activityEventId":2801,"ticketCategoryId":11201,"desc":"_贵宾区","name":"贵宾区","floor":0,"sort":0,"status":1} uuid="polygon_1583483461614_10045"></polygon>`
// "<polygon stroke="" fill="#DB524F" points="454.99798583984375 586.333984375 534.9979858398438 586.333984375 534.9979858398438 719.6680297851562 454.99798583984375 719.6680297851562" center='{"x":494.99798583984375,"y":653.0010070800781}' areaprops='{"id":10202,"activityEventId":2801,"ticketCategoryId":11201,"desc":"_贵宾区","name":"贵宾区","floor":0,"sort":0,"status":1} uuid="polygon_1583483461614_10045"></polygon>"
svg.insertAdjacentHTML(`beforeend`, svgPolygon);
svgPolygon = `<polygon stroke="" fill="#DB524F" points="454.99798583984375 586.333984375 534.9979858398438 586.333984375 534.9979858398438 719.6680297851562 454.99798583984375 719.6680297851562" uuid="polygon_1583483461614_10045"></polygon>`
// "<polygon stroke="" fill="#DB524F" points="454.99798583984375 586.333984375 534.9979858398438 586.333984375 534.9979858398438 719.6680297851562 454.99798583984375 719.6680297851562" uuid="polygon_1583483461614_10045"></polygon>"
svg.insertAdjacentHTML(`beforeend`, svgPolygon);
svgPolygon = `<text x="494.99798583984375" y="653.0010070800781" fill="#000" uuid="area_1583483461614_10045">贵宾区</text>`
// "<text x="494.99798583984375" y="653.0010070800781" fill="#000" uuid="area_1583483461614_10045">贵宾区</text>"
svg.insertAdjacentHTML(`beforeend`, svgPolygon);
solution
missing
'single quote bug ️
OK
const computePolygonCenterPoint = (points = []) => {
// 设置旋转的 origin，为 polygon 的中心，旋转偏移量
let [top, left, right, bottom] = ["", "", "", ""];
points.forEach(([x, y], i) => {
if (i === 0) {
top = y;
bottom = y;
left = x;
right = x;
} else {
top = Math.min(top, y);
bottom = Math.max(bottom, y);
left = Math.min(left, x);
right = Math.max(right, x);
}
});
const point = {
cx: (left + right) / 2,
cy: (top + bottom) / 2,
};
return point;
}
const polygonGenerator = (feature = {}, uuid = ``, areaUuid, offsetFlag = false) => {
const {
properties: {
labelPoint,
fill,
stroke,
type,
// text === name / desc,
id,
activityEventId,
ticketCategoryId,
desc,
name,
floor,
sort,
status,
},
geometry: {
coordinates,
},
} = feature;
const points = coordinates.flat(3).join(` `);
const points_arr = coordinates[0];
let x = 0;
let y = 0;
if(!labelPoint) {
const {
cx,
cy,
} = computePolygonCenterPoint(points_arr);
x = cx;
y = cy;
} else {
const {
x: cx,
y: cy,
} = labelPoint;
x = cx;
y = cy;
}
// svg 绑定区域的 text 偏移量优化 ??? offsetFlag ? +number : -number
const xOffset = 20;
const yOffset = -10;
x = x - xOffset;
y = y - yOffset;
const center = JSON.stringify({
x,
y,
});
let result = ``;
// true && number !== boolean
// if (type === "section" && (name.length ? true : false)) {
if (type === "section" && name.length > 0) {
const ticketArea = {
id,
activityEventId,
ticketCategoryId,
desc,
name,
floor,
sort,
status,
};
const areaProps = JSON.stringify(ticketArea);
// areaprops areaProps auto convert to lowercase bug
result = `
<polygon stroke="${stroke || ''}" fill="${fill || polygonFillColor}" points="${points}" center='${center}' areaprops='${areaProps}' uuid="${uuid}"></polygon>
<text x="${x || ''}" y="${y || ''}" fill="${textFillColor}" uuid="${areaUuid}">${name}</text>
`;
} else {
result = `
<polygon stroke="${stroke || ''}" fill="${fill || polygonFillColor}" points="${points}" center='${center}' uuid="${uuid}"></polygon>
`;
}
return result.trim();
}
最新文章
- va_list结构体
- List之Union(),Intersect(),Except()
- GUI之绘画控制
- scp使用加密算法报错unknown cipher type
- Linux清除磁盘上的RAID信息
- POJ 1753 Flip Game (DFS + 枚举)
- day9_python学习笔记_chapter12_模块
- 利用STM32F唯一96bit序列号实现反拷贝加密的源代码公开（转）
- 遍历ul下的li，点击弹出li的索引
- lucene倒排索引缓冲池的细节
- 201521123066《Java程序设计》第七周学习总结
- 社群公会GangSDK：程序员入行AI领域需要哪些技能？
- Linux系统中errno对应的中文意思 errno.h
- win7共享打印机和防火墙配置
- java 多线程二
- java 全组合 与全排列
- 浏览器输入URL后发生了什么
- 【CodeForces】901 C. Bipartite Segments
- 开发者应该了解的API技术清单
- Codeforces Round #545 (Div. 2)D（KMP，最长公共前后缀，贪心）