<!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()
})
},
})
})
function callback() {
const getPoint = new Mx.MrxDbgUiPrPoint();
getPoint.go((status) => {
if (status != 0) {
return;
}
const pt1 = getPoint.value();
// 定义一个尺寸对象.
let dim = new MyAlignedDimension();
dim.setPoint1(pt1);
dim.setColor(0xff22);
// 在点取第二点时,设置动态绘制.
const worldDrawComment = new Mx.McEdGetPointWorldDrawObject();
worldDrawComment.setDraw((currentPoint) => {
// 动态绘制调用。
dim.setPoint2(currentPoint);
worldDrawComment.drawCustomEntity(dim);
});
getPoint.setBasePt(pt1);
getPoint.setUseBasePt(true);
getPoint.setUserDraw(worldDrawComment);
getPoint.setInputToucheType(Mx.MxType.InputToucheType.kGetEnd);
getPoint.go((status) => {
if (status != 0) {
console.log(status);
return;
}
// 成功取到第二点.
const pt2 = getPoint.value();
// 得到尺寸线的第二个点.
dim.setPoint2(pt2);
// 绘制自定义实体到图上.
Mx.MxFun.getCurrentDraw().addMxEntity(dim);
//计算长度.
var vec = new THREE.Vector3(pt1.x - pt2.x, pt1.y - pt2.y, 0);
var dLen = vec.length();
alert("测试长度是:" + dLen.toFixed(3));
});
});
}
class MyAlignedDimension extends Mx.MxDbAlignedDimension {
constructor() {
super()
}
// 返回长度文本
getDimText() {
var v2ndPtTo1stPt = new THREE.Vector3(this.point1.x - this.point2.x, this.point1.y - this.point2.y, 0);
var fLen = v2ndPtTo1stPt.length()
return fLen.toFixed(3) + "M"
}
}
</script>
<style>
.box {
width: 94vw;
height: 94vh
}
</style>
</html>