<!DOCTYPE html>
<html lang="">
<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">
</head>
<body>
<div class="box">
<canvas id="myCanvas"></canvas>
</div>
</body>
<script src="https://unpkg.com/mxdraw/dist/mxdraw.umd.js"></script>
<script>
// 动态加载 js库核心代码
Mx.loadCoreCode().then(()=> {
// 设置后可以操作绘制的图形对象
Mx.MxFun.setIniset({
// 启用对象选择功能.
EnableIntelliSelect: true,
// 选择类型
IntelliSelectType: 1,
// 是否开启多个选择
multipleSelect: false,
});
// 创建控件对象
Mx.MxFun.createMxObject({
canvasId: "myCanvas", // canvas元素的id
cadFile: "./buf/$test2.dwg", // 转换后的文件 部分浏览器不支持通过file//协议导致跨域问题 请参考：https://cloud.tencent.com/developer/article/1534714
callback: (mxDraw, {
canvas,
canvasParent
}) => {
mxDraw.on("loadComplete", ()=> {
})
mxDraw.on("openFileComplete", () => {
callback()
})
},
})
})
async function callback() {
const { McEdGetPointWorldDrawObject, MrxDbgUiPrPoint, MxDbLine, MxDbRect, MxFun } = Mx;
const THREE = MxFun.getMxFunTHREE()
const getPoint = new MrxDbgUiPrPoint();
getPoint.setMessage("\n指定第一点:");
let pt1 = await getPoint.go();
if (!pt1) {
return;
}
let rect = new MxDbRect();
rect.pt1 = pt1;
// 在点取第二点时，设置动态绘制.
const worldDrawComment = new McEdGetPointWorldDrawObject();
worldDrawComment.setDraw((currentPoint) => {
rect.pt2 = currentPoint;
worldDrawComment.drawCustomEntity(rect);
});
getPoint.setBasePt(pt1);
getPoint.setUseBasePt(true);
getPoint.setUserDraw(worldDrawComment);
getPoint.setMessage("\n指定第二点:");
let pt2 = await getPoint.go();
if (!pt2) {
return;
}
rect.pt2 = getPoint.value();
rect.color = new THREE.Color("#665533");
rect.opacity = 0.9;
rect.renderOrder = 5;
rect.isSolidColorFill = false;
rect.setRadius(0);
//rect.isSolidColorFill = true;
//rect.setRadius(10);
MxFun.getCurrentDraw().addMxEntity(rect);
// 虚线长度
let lenDash = MxFun.screenCoordLong2Doc(10);
{
let line = new MxDbLine();
line.pt1 = new THREE.Vector3(pt1.x, pt1.y, 0);
line.pt2 = new THREE.Vector3(pt1.x, pt2.y, 0);
line.setDashLen(lenDash);
line.setLineWidth(10);
line.setLineWidthByPixels(true);
line.setDashLineDisplay(true);
MxFun.addToCurrentSpace(line);
}
{
let line = new MxDbLine();
line.pt1 = new THREE.Vector3(pt1.x, pt2.y, 0);
line.pt2 = new THREE.Vector3(pt2.x, pt2.y, 0);
line.setDashLen(lenDash);
line.setLineWidth(10);
line.setLineWidthByPixels(true);
line.setDashLineDisplay(true);
MxFun.addToCurrentSpace(line);
}
{
let line = new MxDbLine();
line.pt1 = new THREE.Vector3(pt2.x, pt2.y, 0);
line.pt2 = new THREE.Vector3(pt2.x, pt1.y, 0);
line.setDashLen(lenDash);
line.setLineWidth(10);
line.setLineWidthByPixels(true);
line.setDashLineDisplay(true);
MxFun.addToCurrentSpace(line);
}
{
let line = new MxDbLine();
line.pt1 = new THREE.Vector3(pt2.x, pt1.y, 0);
line.pt2 = new THREE.Vector3(pt1.x, pt1.y, 0);
line.setDashLen(lenDash);
line.setLineWidth(10);
line.setLineWidthByPixels(true);
line.setDashLineDisplay(true);
MxFun.addToCurrentSpace(line);
}
}
</script>
<style>
.box {
width: 94vw;
height: 94vh
}
</style>
</html>
