项目功能中需要SVG绘制功能,直接选择在页面中嵌套Method-Draw
项目下载地址:https://gitcode.com/gh_mirrors/met/Method-Draw/overview?utm_source=artical_gitcode&index=bottom&type=card&webUrl
Method-Draw
项目页面中使用iframe组件加载,需要点击页面中的按钮获取svg编辑内容,保存到服务器
开发阶段Method-Draw暂放本地了,加载地址是http://127.0.0.1:5500/src/index.html
1、父页面:
发送事件通知:
function getSvgString() {
const windowObj = document.getElementById("draw-view").contentWindow;
windowObj.postMessage("saveSvgString", "*");
}
父页面
2、子页面:
监听到获取svg事件后,获取编辑结果并发送携带数据的通知事件给父页面
获取编辑结果:svgCanvas.getSvgString()
子页面
3、父页面监听回传的svg编辑结果
window.addEventListener("message", (event) => {
if (event.data && event.data.type == "getSvgString") {
console.log("svgString", event.data.svgString);
}
});