gh-pages

分支 (2)

管理

管理

gh-pages

main

mxdraw_docs
/
samples
/
graph
/
MxDb2LineAngularDimension.html

<!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>
        <!DOCTYPE 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>MxDb2LineAngularDimension 示例</title>
                <link rel="stylesheet" href="../index.css">
                <script src="../three.js"></script>
            </head>

            <script type="module">
                import Mx from "../mxdraw.esm.js"
                import GUI from "../lil-gui.module.js"

                Mx.loadCoreCode().then(() => {
                    Mx.MxFun.setIniset({
                        // 启用对象选择功能.
                        EnableIntelliSelect: true,
                        // 选择类型
                        IntelliSelectType: 1,
                        // 是否开启多个选择
                        multipleSelect: false,
                    });
                    // 创建控件对象
                    Mx.MxFun.createMxObject({
                        canvasId: "mxcad", // canvas元素的id
                        useWebsocket: false,
                        callback: (mxDrawObject, { canvas, canvasParent }) => {

                        },
                    });
                    let ang = new Mx.MxDb2LineAngularDimension();
                    ang.point1 = new THREE.Vector3(-20,0,0)
                    ang.point2 = new THREE.Vector3(0,0,0)
                    ang.point2 = new THREE.Vector3(-10,-10,0)
                    Mx.MxFun.getCurrentDraw().addMxEntity(ang);
                })
                function draw_angularDimension() {
                    const getPoint = new Mx.MrxDbgUiPrPoint();
                    // 鼠标点击
                    getPoint.go(async (status) => {
                        if (status !== Mx.MrxDbgUiPrBaseReturn.kOk) {
                            return
                        }
                        let ang = new Mx.MxDb2LineAngularDimension();

                        // 测量角度的起始点
                        ang.point1 = getPoint.value()

                        getPoint.setUserDraw((currentPoint, worldDrawComment) => {
                            // 测量角度的具体位置
                            ang.point2 = currentPoint
                            // 动态绘制一条线段
                            worldDrawComment.drawLine(ang.point1, currentPoint)
                        });
                        ang.point2 = await getPoint.go() || new THREE.Vector3()
                        getPoint.setUserDraw((currentPoint, worldDrawComment) => {
                            // 测量角度的终止点
                            ang.point3 = currentPoint
                            worldDrawComment.drawCustomEntity(ang);
                        });
                        ang.point3 = await getPoint.go() || new THREE.Vector3()
                        Mx.MxFun.getCurrentDraw().addMxEntity(ang);

                    })
                }
                const gui = new GUI();
                const myObject = {
                    executeTheCommand: () => draw_angularDimension()
                }
                gui.add(myObject, 'executeTheCommand').name('角度标注')
            </script>

<body>
    <div class="mxdiv">
        <canvas id="mxcad"></canvas>
    </div>

</body>


</html>