mxdraw

SVG 矢量图

2022/4/22

# SVG图形 MxDbSVG

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

点击 Mx.MxDbSVG API (opens new window) 查看详细属性和方法说明。

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>

效果：

  • 点击绘制SVG图按钮，执行绘制函数开始绘制
  • 点击画布展示SVG矢量图

Measure 测量