文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！

SVG 矢量图

发布于 2024-07-31 23:46:24 字数 2234 浏览 0 评论 0 收藏 0

SVG图形 MxDbSVG

我们可以通过实例化一个 Mx.MxDbSVG() 对象创建一个SVG图形。

点击 Mx.MxDbSVG API 查看详细属性和方法说明。

import Mx from "mxdraw"
import * as THREE from "three"

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MxDbSVG 示例</title>
    <script src="https://unpkg.com/mxdraw/dist/mxdraw.umd.js"></script>
</head>
<script type="module">
    Mx.loadCoreCode().then(async () => {
        // 创建控件对象
        Mx.MxFun.createMxObject({
            canvasId: "mxdraw", // canvas元素的id
        });
    })
    // 绘制svg图片函数
    function draw_svg(){
      // 实例化取点对象
      const getPoint = new Mx.MrxDbgUiPrPoint();

      // 鼠标第一次点击
      const pt1 = await getPoint.go()
      if(!pt1) return
      // 实例化SVG图形对象
      const svg = new Mx.MxDbSVG();
      // 设置点位置
      svg.setSvgPostion(pt1);
      // 设置SVG路径
      svg.setSvgPath("/svg/target.svg");
      // 设置SVG大小
      svg.setSvgSize(new THREE.Vector2(20000, 30000))
      // 设置调整比例
      svg.setSvgAlignmentRatio(new THREE.Vector2(0, 0))
      // 获取控件对象并将图片对象svg添加到画布中
      Mx.MxFun.getCurrentDraw().addMxEntity(svg);
    }
    // 绑定按钮click事件
    document.getElementById('btn').addEventListener('click', () => draw_image())
</script>

<body>
    <div>
        <button id="btn">绘制SVG图片</button>
    </div>
    <div style="height: 80vh; overflow: hidden;">
        <canvas id="mxdraw"></canvas>
    </div>
</body>

</html>

效果：