文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！
Area 多边形
任意不规则多边形 MxDbArea
我们可以通过实例化一个 Mx.MxDbArea() 对象创建任意不规则多边形。
点击 Mx.MxDbArea API 查看详细属性和方法说明。
<!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>MxDbArea 示例</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
});
})
// 绘制多边形函数
async function draw_area() {
// 实例化取点对象
const getPoint = new Mx.MrxDbgUiPrPoint()
// 实例化多边形对象area
const area = new Mx.MxDbArea()
while (true) {
const pt = await getPoint.go()
if (!pt) break;
area.addPoint(pt)
getPoint.setUserDraw((currentPoint, worldDrawComment) => {
// 克隆多边形对象
const tmp = area.clone()
// 添加顶点
tmp.addPoint(currentPoint)
// 动态绘制该克隆对象实现动态绘制的动画效果
worldDrawComment.drawCustomEntity(tmp)
})
}
// 获取控件对象并将多边形area添加到画布中
Mx.MxFun.getCurrentDraw().addMxEntity(area)
}
// 绑定按钮click事件
document.getElementById('btn').addEventListener('click', () => draw_area())
</script>
<body>
<div>
<button id="btn">绘制多边形</button>
</div>
<div style="height: 80vh; overflow: hidden;">
<canvas id="mxdraw"></canvas>
</div>
</body>
</html>
效果：
- 点击绘制多边形按钮，执行绘制函数开始绘制
- 连续点击设置任意多边形的顶点
- 按下ESC键或者点击鼠标右键结束绘制、
正多边形 MxDbRegularPolygon
我们可以通过实例化一个 Mx.MxDbRegularPolygon() 对象创建正多边形。其中，正多边形的边数可通过属性sidesNumber控制，用户既可以直接设置sidesNumber，也可以结合命令模式在绘制页面手动输入自主设置。
点击 Mx.MxDbRegularPolygon API 查看详细属性和方法说明。
<!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>MxDbRegularPolygon 示例</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
});
})
// 绘制正多边形函数
async function draw_regularArea() {
const getPoint = new Mx.MrxDbgUiPrPoint();
let regularPolygon = new Mx.MxDbRegularPolygon();
const center = await getPoint.go();
if(!center) return;
// 设置多边形边的中心点
regularPolygon.centerPoint = center
// 设置多边形边的数量
regularPolygon.sidesNumber = 6
getPoint.setUserDraw((currentPoint, worldDrawComment) => {
// 设置多边形两条边相连的点
regularPolygon.otherPoint = currentPoint
worldDrawComment.drawCustomEntity(regularPolygon);
});
regularPolygon.otherPoint = await getPoint.go()
Mx.MxFun.getCurrentDraw().addMxEntity(regularPolygon);
}
// 绑定按钮click事件
document.getElementById('btn').addEventListener('click', () => draw_regularArea())
</script>
<body>
<div>
<button id="btn">绘制正多边形</button>
</div>
<div style="height: 80vh; overflow: hidden;">
<canvas id="mxdraw"></canvas>
</div>
</body>
</html>
效果：
- 点击绘制正多边形按钮，执行绘制函数开始绘制
- 点击画布移动鼠标 绘制正多边形
- 再次点击 结束绘制
- 点击绘制好的正多边形就可以控制正多边形
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论