gh-pages

分支 (2)

管理

管理

gh-pages

main

mxdraw_docs
/
samples
/
graph
/
MxDbImage.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>MxDbImage 示例</title>
    <link rel="stylesheet" href="../index.css">
</head>
<script src="../three.js"></script>
<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 }) => {

            },
        });
        const pt1 = new THREE.Vector3(-10,0,0)
        const image = new Mx.MxDbImage();
        const w = Mx.MxFun.screenCoordLong2Doc(60);
        const h = Mx.MxFun.screenCoordLong2Doc(40);
        image.setPoint1(pt1);
        const pt2 = new THREE.Vector3(pt1.x + w, pt1.y + h, pt1.z);
        image.setPoint2(pt2);
        image.setImagePath("../../img/dlyx_icon.png");
        Mx.MxFun.getCurrentDraw().addMxEntity(image);
    })
    function draw_image() {
        // 实例化取点对象
        const getPoint = new Mx.MrxDbgUiPrPoint();

        // 鼠标第一次点击
        getPoint.go((status) => {
            if (status != 0) {
                return
            }

            // 当前鼠标位置
            const pt1 = getPoint.value()
            // 实例化矩形对象rect
            const image = new Mx.MxDbImage();

            // 60,40,是图片的宽高，单位是屏幕像素.
            const w = Mx.MxFun.screenCoordLong2Doc(60);
            const h = Mx.MxFun.screenCoordLong2Doc(40);


            // 设置点位置
            image.setPoint1(pt1);
            const pt2 = new THREE.Vector3(pt1.x + w, pt1.y + h, pt1.z);
            image.setPoint2(pt2);

            // 设置图片路径
            image.setImagePath("../../img/dlyx_icon.png");

            // 获取控件对象并将图片对象image添加到画布中
            Mx.MxFun.getCurrentDraw().addMxEntity(image);


            // GUI
            const gui = new GUI();
            const params = {
                setImagePath: "../../img/dlyx_icon.png",

            }
            const setPoint1 = gui.addFolder('pt1')
            const setPoint2 = gui.addFolder('pt2')
            setPoint1.add(image.pt1, 'x')
            setPoint1.add(image.pt1, 'y');
            setPoint1.add(image.pt1, 'z');
            setPoint2.add(image.pt2, 'x');
            setPoint2.add(image.pt2, 'y');
            setPoint2.add(image.pt2, 'z');

            gui.add(params, 'setImagePath', ['../../img/dlyx_icon.png', '../../img/kpt_icon.png', '../../img/wmxs_icon.png']).onChange((src) => {
                image.setImagePath(src)
            })
            gui.onFinishChange((event) => {
                image.setNeedUpdateDisplay(true)
            })

        })
    }
    const gui = new GUI();
    const myObject = {
        executeTheCommand: () => draw_image()
    }
    gui.add(myObject, 'executeTheCommand').name('绘制图片')
</script>

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

</body>


</html>