分析文件中的代码,详细介绍每段代码的功能
时间: 2024-10-19 17:17:13 浏览: 30
该代码定义了一个名为 `f_draw_design` 的函数,用于绘制一个板材设计图。以下是代码各部分的功能详细说明:
### 初始化和变量声明
```javascript
function f_draw_design() {
f_draw_init();
var doubleFlag = sDBL_YN;
var iTotCanvasWidth = $('#divSlabList_img').width();
var iTotCanvasHeight = $('#divSlabList_img').height();
var iDrawLength = iTotCanvasWidth / 1.1;
var iDrawWidth = iTotCanvasHeight / 1.1;
// 板材数据
var mPlateWidth = mplt_wth;
var mPlateLength = mplt_lth;
var mPlateMin = mplt_lth_min;
var mPlateMax = mplt_lth_max;
var mPlateSpcLth = mplt_spc_lth;
var mpltDblWth = mplt_dbl_wth;
var mpltDrawDblWth = Math.ceil(iDrawLength * mpltDblWth / mPlateMax);
var maxLineStartX = ((iTotCanvasWidth - iDrawLength) / 2) + iDrawLength;
var maxLineEndY = iTotCanvasHeight;
var minLineStartX = ((iTotCanvasWidth - iDrawLength) / 2) + (iDrawLength * mplt_lth_min / mPlateMax);
var minLineEndY = iTotCanvasHeight;
}
```
- **初始化**:调用 `f_draw_init()` 函数进行一些初始设置。
- **获取画布尺寸**:获取 `divSlabList_img` 元素的宽度和高度,并计算绘图区域的实际宽度和高度。
- **板材数据**:从全局变量中读取板材的相关参数,如宽度、长度、最小值、最大值等。
- **计算辅助线位置**:计算最大值和最小值线的起始点和结束点坐标。
### 创建绘图对象
```javascript
$('#divSlabList_img').jqxDraw();
var renderer = $('#divSlabList_img').jqxDraw('getInstance');
```
- **创建绘图对象**:使用 `jqxDraw` 插件在 `divSlabList_img` 元素上创建一个绘图对象,并获取其实例。
### 计算板材绘制参数
```javascript
var mPlateDrawLength = iDrawLength * mPlateLength / mPlateMax;
var mPlateDrawWidth = iDrawWidth;
var gridDgnOrdListRowsData = fc_getRowsData(gridDgnOrdListId);
var mPlateStartX = (iTotCanvasWidth - iDrawLength) / 2;
var mPlateStartY = (iTotCanvasHeight - iDrawWidth) / 2;
// 绘制板材矩形
renderer.rect(mPlateStartX, mPlateStartY, mPlateDrawLength, mPlateDrawWidth, { stroke: gb_mpltColor, fill: gb_mpltColor });
var nPlateCount = 0;
$.each(gridDgnOrdListRowsData, function(rowIndex, rowValue) {
for (var i = 1; i <= 2; i++) {
nPlateCount += Number(rowValue["DGN_PLT_PCS" + i]) + Number(rowValue["DGN_OVROLL_PCS" + i]);
}
});
var nPltCutDrawSpcLth = mPlateSpcLth / Math.ceil((nPlateCount - 1) / (doubleFlag == "Y" ? 2 : 1));
nPltCutDrawSpcLth = iDrawLength * nPltCutDrawSpcLth / mPlateMax;
var plateSizeObj = {
"mPlateWidth": mPlateWidth,
"mPlateDrawWidth": mPlateDrawWidth,
"mPlateLength": mPlateLength,
"mPlateDrawLength": mPlateDrawLength,
"nPlateStartX": mPlateStartX,
"mPlateStartY": mPlateStartY,
"nPlateStartY": 0,
"nPlateDrawLength": 0,
"nPltDrawWidth": 0,
"nPltCutSpcWth": 0,
"nPltCutDrawSpcWth": 0,
"nPltCutDrawSpcLth": nPltCutDrawSpcLth,
"nPltDrawDblSpcWth": mpltDrawDblWth,
"lastPlateLength": 0,
"plateIndex": 1
};
```
- **计算板材绘制长度和宽度**:根据实际比例计算板材的绘制长度和宽度。
- **获取订单数据**:从 `gridDgnOrdListId` 中获取所有行的数据。
- **计算板材总数**:遍历订单数据,统计总的板材数量。
- **计算切割间距**:根据板材总数和是否双面绘制,计算每个板材之间的切割间距。
- **初始化板材绘制对象**:创建一个对象 `plateSizeObj`,存储板材的各种绘制参数。
### 绘制板材
```javascript
$.each(gridDgnOrdListRowsData, function(rowIndex, rowValue) {
for (var q = 1; q <= 2; q++) {
for (var i = 0; i < rowValue["DGN_PLT_PCS" + q]; i++) {
plateSizeObj["nPlateLength"] = rowValue["DGN_PLT_LTH" + q];
plateSizeObj["nPlateWidth"] = rowValue["HRL_PROD_WTH_AIM"];
plateSizeObj["nPltCutSpcWth"] = (plateSizeObj["mPlateWidth"] - (plateSizeObj["nPlateWidth"] * (doubleFlag == "Y" ? 2 : 1))) / 2;
plateSizeObj["nPltCutDrawSpcWth"] = iDrawWidth * plateSizeObj["nPltCutSpcWth"] / mPlateWidth - plateSizeObj["nPltDrawDblSpcWth"];
plateSizeObj = f_calc_plate_size(doubleFlag, plateSizeObj);
var nPlateDrawObj = renderer.rect(
plateSizeObj["nPlateStartX"],
plateSizeObj["nPlateStartY"],
plateSizeObj["nPlateDrawLength"],
plateSizeObj["nPltDrawWidth"],
{ stroke: gb_pltStrokeColor, fill: gb_pltColor }
);
$(nPlateDrawObj).attr("id", "DRAW_PLATE" + plateSizeObj["plateIndex"]);
$(nPlateDrawObj).attr("name", "Plate" + plateSizeObj["plateIndex"]);
plateSizeObj["lastPlateLength"] = plateSizeObj["nPlateDrawLength"];
var plateOrd = rowValue["ORD_NO"] + "-" + rowValue["ORD_LN"];
var plateSize = rowValue["ORD_THK"] + "*" + rowValue["HRL_PROD_WTH_AIM"] + "*" + rowValue["DGN_PLT_LTH" + q];
var plateWgt = Math.round((rowValue["ORD_THK"] * rowValue["HRL_PROD_WTH_AIM"] * rowValue["DGN_PLT_LTH" + q] * steel_grvt) / Math.pow(10, 9) * 1000) / 1000;
var toolTipCont = gb_tooltipMsg;
toolTipCont = toolTipCont.replace("#ORD_NO_LN", plateOrd);
toolTipCont = toolTipCont.replace("#ORD_FL", gb_multiLangApo);
toolTipCont = toolTipCont.replace("#SIZE", plateSize);
toolTipCont = toolTipCont.replace("#WGT", plateWgt);
$("#" + "DRAW_PLATE" + plateSizeObj["plateIndex"]).jqxTooltip({
position: 'mouse',
content: toolTipCont
});
plateSizeObj["plateIndex"] += 1;
}
for (var i = 0; i < rowValue["DGN_OVROLL_PCS" + q]; i++) {
plateSizeObj["nPlateLength"] = rowValue["DGN_PLT_LTH" + q];
plateSizeObj["nPlateWidth"] = rowValue["HRL_PROD_WTH_AIM"];
plateSizeObj["nPltCutSpcWth"] = (plateSizeObj["mPlateWidth"] - (plateSizeObj["nPlateWidth"] * (doubleFlag == "Y" ? 2 : 1))) / 2;
plateSizeObj["nPltCutDrawSpcWth"] = iDrawWidth * plateSizeObj["nPltCutSpcWth"] / mPlateWidth - plateSizeObj["nPltDrawDblSpcWth"];
plateSizeObj = f_calc_plate_size(doubleFlag, plateSizeObj);
var nPlateDrawObj = renderer.rect(
plateSizeObj["nPlateStartX"],
plateSizeObj["nPlateStartY"],
plateSizeObj["nPlateDrawLength"],
plateSizeObj["nPltDrawWidth"],
{ stroke: gb_pltStrokeColor, fill: gb_overRollColor }
);
$(nPlateDrawObj).attr("id", "DRAW_PLATE" + plateSizeObj["plateIndex"]);
$(nPlateDrawObj).attr("name", "Plate" + plateSizeObj["plateIndex"]);
plateSizeObj["lastPlateLength"] = plateSizeObj["nPlateDrawLength"];
var plateOrd = rowValue["ORD_NO"] + "-" + rowValue["ORD_LN"];
var plateSize = rowValue["ORD_THK"] + "*" + rowValue["HRL_PROD_WTH_AIM"] + "*" + rowValue["DGN_PLT_LTH" + q];
var plateWgt = Math.round((rowValue["ORD_THK"] * rowValue["HRL_PROD_WTH_AIM"] * rowValue["DGN_PLT_LTH" + q] * steel_grvt) / Math.pow(10, 9) * 1000) / 1000;
var toolTipCont = gb_tooltipMsg;
toolTipCont = toolTipCont.replace("#ORD_NO_LN", plateOrd);
toolTipCont = toolTipCont.replace("#ORD_FL", gb_multiLangNapo);
toolTipCont = toolTipCont.replace("#SIZE", plateSize);
toolTipCont = toolTipCont.replace("#WGT", plateWgt);
$("#" + "DRAW_PLATE" + plateSizeObj["plateIndex"]).jqxTooltip({
position: 'mouse',
content: toolTipCont
});
plateSizeObj["plateIndex"] += 1;
}
}
});
```
- **遍历订单数据**:逐行处理订单数据,绘制每块板材。
- **计算板材尺寸**:根据订单数据计算每块板材的实际尺寸和位置。
- **绘制板材矩形**:使用 `renderer.rect` 方法绘制板材矩形,并设置边框和填充颜色。
- **添加工具提示**:为每个板材添加工具提示,显示订单号、尺寸和重量等信息。
### 绘制最小值和最大值线及文本
```javascript
// 最小值线
renderer.line(minLineStartX, 0, minLineStartX, minLineEndY, { stroke: gb_minMaxLineColor, 'stroke-width': 4, 'stroke-dasharray': '2,5' });
// 最小值文本
renderer.text("" + mPlateMin, minLineStartX, 10, undefined, undefined, 0, { 'class': 'largeText', fill: gb_minMaxTextColor, stroke: gb_minMaxTextColor }, false, 'center', 'center', 'centermiddle');
// 最大值线
renderer.line(maxLineStartX, 0, maxLineStartX, maxLineEndY, { stroke: gb_minMaxLineColor, 'stroke-width': 4, 'stroke-dasharray': '2,5' });
// 最大值文本
renderer.text("" + mPlateMax, maxLineStartX, 10, undefined, undefined, 0, { 'class': 'largeText', fill: gb_minMaxTextColor, stroke: gb_minMaxTextColor }, false, 'center', 'center', 'centermiddle');
renderer.refresh();
```
- **绘制最小值线**:在画布上绘制一条表示最小值的虚线。
- **绘制最小值文本**:在最小值线上方添加最小值的文本标签。
- **绘制最大值线**:在画布上绘制一条表示最大值的虚线。
- **绘制最大值文本**:在最大值线上方添加最大值的文本标签。
- **刷新绘图**:调用 `renderer.refresh()` 刷新绘图,使所有绘制的内容生效。
通过以上步骤,该函数实现了在一个指定的 HTML 元素内绘制板材设计图,并添加了相应的工具提示和标注。
阅读全文
相关推荐
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![-](https://img-home.csdnimg.cn/images/20210720083327.png)
![application/pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![application/msword](https://img-home.csdnimg.cn/images/20210720083327.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![txt](https://img-home.csdnimg.cn/images/20210720083642.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![application/x-rar](https://img-home.csdnimg.cn/images/20210720083606.png)