#Front end# #CAD# #IoT Visual Development#
- Create parameter constructor
- Draw the measurement line life cycle
- Coordinate point distance calculation
Introduction: Measuring line segments on CAD drawings is a common function. How to measure line segments in a 3D scene? There is no need for manual operations such as selection and merging, and the measurement of the 3D interface has its own angle measurement function, which is more smooth to achieve.
Demo link:http://www.thingjs.com/guide/?m=sample
Create parameter constructor
js is an object-based programming language. There are various ways to create objects. Common ones include JSON format creation and constructor creation. ThingJS uses Constructor () as an object constructor function to construct an "object type", that is, to create an object frame of the same type.
The use of this in an object refers to a new object. When a new object is created, the value of this will become the new object. But this itself is not a variable, but as a keyword. Everything in an object is an attribute. The Constructor () constructor assigns initial values to the attributes of the object. The construction parameter option can be arbitrarily extended in JS to achieve dynamic binding. For example, the construction parameters for drawing measurement lines are created as follows:
/**
* 绘制测量线
*/
class DrawLine {
/**
* 构造器
* @param {JSON} option - 构造参数
*/
constructor(option) {
this.opts = option;
this.pointsArr = [this.opts.currPosition]; // 鼠标移动中坐标点的集合
this.coordinatesArr = [this.opts.currPosition]; // 存储鼠标点击后坐标点的集合
this.ePosition = null; // 存储触发事件后鼠标的位置
this.lineCoor = [this.opts.currPosition]; // 存储当前两个坐标点
this.disArr = []; // 存储所有坐标点与坐标点间的距离
this.numIndex = 0; // 自增变量
this.reSetDistance; // 存储两点间的距离
this.lastStatus = false; // 判断是否绘制结束值为false为未结束true为结束
this.pointsObjArr = [];
this.rianleyDom = $('#marker'); // 跟随鼠标的提示
this.pointCardDom = $('#pointMarker'); // 鼠标移动至节点的提示
this.init(); // 初始化
this.appClick(); // 调用方法
}Draw the measurement line life cycle
In the BIM system, drawing a measurement line is a common operation, which can realize free drag and drop online, and can realize the dynamic display of visual data. The ThingJS platform lightweight measurement operation is based on a simple logical drawing life cycle, including creating objects, measuring visualization, and displaying dynamic information.
First, create the basic elements of nodes, line segments and top cards of nodes, and determine the starting point and the coordinates of each node. The line segment belongs to the collection of all coordinate points after the mouse click, that is, the total distance measured.
Secondly, by adding a registered event, the actual measurement operation steps can be carried out. Click the left button to add a node, and the right mouse button to end drawing. If it is a multi-line measurement, move the mouse to continue drawing. Click the left button to create a node, click the delete icon to remove the node.
Coordinate point distance calculation
How to calculate the distance between coordinate points in web development? The JS logic refers to the official ThingJS example. The distance calculation of the coordinate point uses the function getdistance to call the constructor parameters, which can not only measure single line segments and multi-line segments, but also the continuous measurement method can be easily implemented.
/**
* 计算两个坐标点间的距离
*/
getDistance() {
if (this.lineCoor.length < 2) return;
if (this.coordinatesArr.length > 2) {
this.lineCoor.shift();
}
this.lineDistance = THING.Math.getDistance(this.lineCoor[0], this.lineCoor[1]);
this.lineDistance = this.lineDistance.toFixed(2);
this.disArr.push(this.lineDistance);
let countNum = 0;
this.disArr.forEach(v => {
countNum += parseFloat(v);
});
this.lineDistanceAll = countNum.toFixed(2);
}If you want to disclose the measurement details, it is generally displayed in real-time on the 2D panel. At the same time as the mouse measurement, the decision analysis needs can also be met through the panel information.
end
The line measurement of the 3D model follows the measurement method of the 2D drawing, not only the linear measurement, but also the arc measurement method! Quickly measuring continuous line segments is an indispensable IoT 3D development skill, come and have a try!
About ThingJS
The ThingJS platform provides 3D visualization components for the Internet of Things, making 3D development easier! Direct Javascript call 3D script, based on 200 3D development source code examples, let you fully understand the visual development logic of the Internet of Things. Scene building-3D script development-data docking-project deployment one-stop service to make development more efficient, and become a digital twin technology innovator with 200,000 developers!