整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
各位網(wǎng)友大家好，今天給大家推薦一個(gè)前端畫(huà)圖的javascript庫(kù)，可用于構(gòu)建數(shù)據(jù)流圖、任務(wù)流圖、知識(shí)圖譜展示等，他就是——MetricFlow.js。
MetricFlow是一個(gè)前端畫(huà)圖的javascript庫(kù)，可用于構(gòu)建可拖拽、可靈活定義的數(shù)據(jù)流圖、任務(wù)流圖、知識(shí)圖譜展示等
創(chuàng)建畫(huà)布只需要定義div標(biāo)簽即可，并聲明畫(huà)布的width和height
<div id="graph" height="700px" width="1100px" ></div>/*在畫(huà)布上創(chuàng)建圖*/
let metricFlow=MetricFlow("graph")
/*定義節(jié)點(diǎn)數(shù)據(jù)*/
let nodeData={
"id":"primaryKey",//id在全局中不能重復(fù)，否則會(huì)被覆蓋
"title":{'name':"運(yùn)行時(shí)間統(tǒng)計(jì)"},
"data":[
{'name':'方法：IndexController#method1'},
{'name':'平均耗時(shí)：0.333ms'},
]
};
/*在(20,200)坐標(biāo)上創(chuàng)建一個(gè)節(jié)點(diǎn)*/
let node1=metricFlow.createNode(nodeData,10,200);
/*或者直接在nodeData中定義位置x和y屬性，然后*/
/*metricFlow.createNode(nodeData);*/let metricFlow=MetricFlow("graph")
let node1Data={
"x":10,
"y":200,
"id":"node1",
"title":{'name':"運(yùn)行時(shí)間統(tǒng)計(jì)"},
"data":[
{'name':'方法：IndexController#method1'},
{'name':'平均耗時(shí)：0.333ms'},
]
};
let node1=metricFlow.createNode(node1Data);
let node2Data={
"x":300,
"y":200,
"id":"node2",
"title":{'name':"運(yùn)行時(shí)間統(tǒng)計(jì)"},
"data":[
{'name':'方法：IndexController#method1'},
{'name':'平均耗時(shí)：0.333ms'},
]
};
let node2=metricFlow.createNode(node2Data);
/*連接兩個(gè)節(jié)點(diǎn)*/
metricFlow.createLink(node1,node2);或者直接在末尾節(jié)點(diǎn)中指定from屬性，無(wú)需metricFlow.createLink(node1,node2);
let metricFlow=MetricFlow("graph")
let node1Data={
"x":10,
"y":200,
"id":"node1",
"title":{'name':"運(yùn)行時(shí)間統(tǒng)計(jì)"},
"data":[]
};
let node1=metricFlow.createNode(node1Data);
let node2Data={
"x":300,
"y":200,
"id":"node2",
"from":"node1",//from的值可以是string 也可以是數(shù)組
"title":{'name':"運(yùn)行時(shí)間統(tǒng)計(jì)"},
"data":[]
};
let node2=metricFlow.createNode(node2Data);批量創(chuàng)建節(jié)點(diǎn)有兩種方式，第一種使用list創(chuàng)建，并在每個(gè)節(jié)點(diǎn)數(shù)據(jù)中指定from屬性即可創(chuàng)建關(guān)系：
let metricFlow=MetricFlow("graph")
/*定義節(jié)點(diǎn)數(shù)據(jù)*/
let node1Data={
"x":20,
"y":200,
"id":"node1",
"title":{'name':"節(jié)點(diǎn)1"}
};
let node2Data={
"x":300,
"y":50,
"id":"node2",
"from":"node1",
"title":{'name':"節(jié)點(diǎn)2"}
};
let node3Data={
"x":300,
"y":300,
"id":"node3",
"from":"node1",
"title":{'name':"節(jié)點(diǎn)3"}
};
let nodes=[node1Data,node2Data,node3Data];
metricFlow.createNodes(nodes);第二種使用children屬性創(chuàng)建，根節(jié)點(diǎn)的x和y需指定，其余子節(jié)點(diǎn)會(huì)自動(dòng)向右排列
let nodes={
"x":20,
"y":200,
...
"children":[
{
"id":"node3",
...
"children":[
{...}
]
},
]
};
metricFlow.createNodes(nodes);
自動(dòng)創(chuàng)建的時(shí)候如果節(jié)點(diǎn)間距不合適，可調(diào)整
let options={
'node-distance-offsetx':5,//左右間距+5
'node-distance-offsety':-5//上下間距-5
};
let metricFlow=MetricFlow("graph",options)
自動(dòng)創(chuàng)建的時(shí)候如果數(shù)據(jù)格式不匹配，又不想遍歷處理，可傳入函數(shù)調(diào)整
function format(data){
data['value']=data['value']+"ms";
return data;
}
metricFlow.createNodes(nodes,format);節(jié)點(diǎn)由三部分組成，分別是 標(biāo)題、元素集和剩余的背景，每一個(gè)部分都支持兩種樣式定義方式：
第一種是沿用了css的樣式，在數(shù)據(jù)上添加style即可，如，更改整個(gè)節(jié)點(diǎn)的邊框顏色和粗細(xì)：
let node2Data={
"id":"node2",
"style":"border-color:red;border-width:2px;",
"title":{'name':"運(yùn)行時(shí)間統(tǒng)計(jì)"},
"data":[
{'name':'方法：IndexController#method1'},
{'name':'平均耗時(shí)：0.333ms'},
]
};第二種是提取了background-color和border-color兩個(gè)樣式，可以單獨(dú)配置
let node2Data={
"id":"node2",
"background-color":"red",
"border-color":"red",
"title":{'name':"運(yùn)行時(shí)間統(tǒng)計(jì)"},
"data":[
{'name':'方法：IndexController#method1'},
{'name':'平均耗時(shí)：0.333ms'},
]
};樣式定義demo-demo4.html
let node2Data={
"id":"node2",
"title":{'name':"運(yùn)行時(shí)間統(tǒng)計(jì)","style":"background-color:red;border-color:red;font-size:15px;"},
"data":[
{'name':'方法：IndexController#method1'},
{'name':'平均耗時(shí)：0.333ms'},
]
};let node2Data={
"id":"node2",
"title":{'name':"運(yùn)行時(shí)間統(tǒng)計(jì)"},
"data":[
{'name':'方法：IndexController#method1',"style":"font-size:10px;"},
{'name':'平均耗時(shí)：0.333ms',"style":"font-size:10px;"},
]
};連線位置目前僅支持偏移量定義，可在創(chuàng)建MetricFlow時(shí)定義
連線分為起始點(diǎn)和終點(diǎn)，可設(shè)置全局的起始點(diǎn)的偏移位置，主要考慮前端框架使用較為復(fù)雜時(shí)css沖突所導(dǎo)致位置偏移的校正
let options={
'link-start-offsetx':1,//起始點(diǎn)向右偏移一個(gè)單位
'link-start-offsety':-1,//起始點(diǎn)向上偏移一個(gè)單位
'link-end-offsetx':-1,
'link-end-offsety':-1,
'link-width-offset':-1,//線段粗細(xì)減小1個(gè)單位
'link-color':"blue", //更改線段顏色
};
let metricFlow=MetricFlow("graph",options)連線位置demo-demo5.html
支持基本的鼠標(biāo)事件，如click、dblclick、mousedown、mouseup等，與原生js一致，事件在對(duì)應(yīng)節(jié)點(diǎn)身上配置即可：
let node1Data={
"id":"primaryKey",
"title":{'name':"雙擊"},
'click':"sinclick", //單擊 sinclick為函數(shù)名
'dblclick':"doubleClick",//雙擊
"data":[
{'name':'方法：IndexController#method1'},
{'name':'平均耗時(shí)：0.333ms'},
]
};V1.0：創(chuàng)建節(jié)點(diǎn)；連線；樣式定義；鼠標(biāo)事件
1.本項(xiàng)目版權(quán)屬作者所有，并使用 Apache-2.0進(jìn)行開(kāi)源；
2.您可以使用本項(xiàng)目進(jìn)行學(xué)習(xí)、商用或者開(kāi)源，但任何使用了本項(xiàng)目的代碼的軟件和項(xiàng)目請(qǐng)尊重作者的原創(chuàng)權(quán)利；
3.如果您使用并修改了本項(xiàng)目的源代碼，請(qǐng)注明修改內(nèi)容以及出處；
4.其他內(nèi)容請(qǐng)參考Apache-2.0
Python數(shù)據(jù)分析與可視化領(lǐng)域，Matplotlib作為一款功能強(qiáng)大的圖形庫(kù)，不僅能夠創(chuàng)建靜態(tài)圖表，更支持創(chuàng)建生動(dòng)的動(dòng)畫(huà)效果，使數(shù)據(jù)的演變過(guò)程得以直觀展現(xiàn)。本文將深入探討Matplotlib的動(dòng)畫(huà)功能，通過(guò)實(shí)例代碼解析，幫助您掌握如何利用Matplotlib繪制出令人眼前一亮的動(dòng)態(tài)圖表，為您的數(shù)據(jù)分析工作注入活力。
Matplotlib動(dòng)畫(huà)基于matplotlib.animation模塊，通過(guò)迭代更新圖表元素（如線條、文本、圖像等），實(shí)現(xiàn)數(shù)據(jù)隨時(shí)間變化的動(dòng)態(tài)可視化。主要涉及以下核心類(lèi)和方法：
以下是一個(gè)使用FuncAnimation繪制動(dòng)態(tài)正弦波的例子：
import numpy as np
import matplotlib.pyplot as plt
from matplotlib.animation import FuncAnimation
fig, ax=plt.subplots()
x_data, y_data=[], []
line,=ax.plot([], [], lw=2)
def update(frame):
t=frame / 10.0
x=np.linspace(0, 2 * np.pi, 1000)
y=np.sin(x + t)
x_data.append(x)
y_data.append(y)
line.set_data(x_data[-1], y_data[-1])
return line,
ani=FuncAnimation(fig, update, frames=np.arange(100), interval=20, blit=True)
plt.show()
在這個(gè)例子中：
def update(frame):
...
ax.set_title(f"Time: {frame / 10.0:.1f} s")
ax.set_xlabel("X-axis label")
ax.set_ylabel("Y-axis label")
...
ani.save('sine_wave_animation.mp4', writer='ffmpeg')
import random
fig, ax=plt.subplots()
scat=ax.scatter([], [])
def update(frame):
N=?
data=[(random.uniform(-1, 1), random.uniform(-1, 1)) for _ in range(N)]
scat.set_offsets(data)
return scat,
ani=FuncAnimation(fig, update, frames=np.arange(100), interval=20, blit=True)
plt.show()
import time
data=[random.randint(0, 100) for _ in range(5)]
fig, ax=plt.subplots()
bars=ax.bar(range(5), data)
def update(frame):
for bar, value in zip(bars, (random.randint(0, 100) for _ in range(5))):
bar.set_height(value)
return bars,
ani=FuncAnimation(fig, update, frames=np.arange(100), interval=20, blit=True)
plt.show()
實(shí)時(shí)監(jiān)控系統(tǒng)：
# 假設(shè)已連接到實(shí)時(shí)數(shù)據(jù)源
data_stream=get_realtime_data()
fig, ax=plt.subplots()
line,=ax.plot([], [], lw=2)
def update(frame):
new_data=next(data_stream)
line.set_data(new_data['time'], new_data['value'])
return line,
ani=FuncAnimation(fig, update, frames=np.arange(100), interval=20, blit=True)
start_web_server(ani)
交互式Web應(yīng)用：
# 假設(shè)已搭建Flask環(huán)境
from flask import Flask, render_template, jsonify
app=Flask(__name__)
@app.route('/data')
def stream_data():
return jsonify(next(get_realtime_data()))
@app.route('/')
def index():
return render_template('index.html')
if __name__=='__main__':
app.run(debug=True)
在templates/index.html中使用JavaScript庫(kù)（如D3.js）對(duì)接API，動(dòng)態(tài)更新圖表。
Matplotlib的動(dòng)畫(huà)功能極大地豐富了數(shù)據(jù)可視化的表現(xiàn)形式，使復(fù)雜的數(shù)據(jù)演變過(guò)程得以生動(dòng)呈現(xiàn)。通過(guò)掌握FuncAnimation的使用方法，您可以輕松創(chuàng)建各類(lèi)動(dòng)態(tài)圖表，如動(dòng)態(tài)散點(diǎn)圖、條形圖等，以適應(yīng)不同的數(shù)據(jù)分析需求。在Python Web項(xiàng)目中，結(jié)合實(shí)時(shí)數(shù)據(jù)源與Web框架（如Flask），您可以構(gòu)建實(shí)時(shí)監(jiān)控系統(tǒng)、交互式Web應(yīng)用等，將動(dòng)態(tài)圖表融入到線上服務(wù)中，提升用戶(hù)體驗(yàn)與數(shù)據(jù)洞察力。
ode環(huán)境安裝
這里以一個(gè)Vue3工程為例子
首先安裝Nodehttps://nodejs.org/zh-cn/download/請(qǐng)根據(jù)電腦操作系統(tǒng)安裝對(duì)應(yīng)的安裝包
步驟 1 : 雙擊下載后的安裝包，如下所示：
步驟 2 : 點(diǎn)擊上圖的Run(運(yùn)行)，將出現(xiàn)如下界面：
步驟 3 : 勾選接受協(xié)議選項(xiàng)，點(diǎn)擊 next（下一步） 按鈕 :
步驟 4 : Node.js默認(rèn)安裝目錄為 C:\Program Files\nodejs\, 你可以修改目錄，并點(diǎn)擊 next（下一步）：
步驟 5 : 點(diǎn)擊樹(shù)形圖標(biāo)來(lái)選擇你需要的安裝模式 , 然后點(diǎn)擊下一步 next（下一步）
步驟 6 :點(diǎn)擊 Install（安裝） 開(kāi)始安裝Node.js。你也可以點(diǎn)擊 Back（返回）來(lái)修改先前的配置。 然后并點(diǎn)擊 next（下一步）：
安裝過(guò)程：
點(diǎn)擊 Finish（完成）按鈕退出安裝向?qū)А?/span>
2.Node安裝完成后需要配置環(huán)境變量
檢測(cè)PATH環(huán)境變量是否配置了Node.js，點(diǎn)擊開(kāi)始=》運(yùn)行=》輸入"cmd"=> 輸入命令"path"， 輸出如下結(jié)果：
我們可以看到環(huán)境變量中已經(jīng)包含了 C:\Program Files\nodejs\
如果沒(méi)有，我們就需要把我們前面安裝Node 步驟四中安裝目錄設(shè)置為環(huán)境變量：
找到我的電腦=》鼠標(biāo)右鍵選擇=》 選擇屬性=》 找到高級(jí)系統(tǒng)設(shè)置=》 環(huán)境變量=》 變量path=》 點(diǎn)擊編輯=》將node安裝目錄填上并確定
最后檢查一下Node.js版本看是否安裝成功
編輯器 vscode
也可以是代碼其他編輯器，這里以vscode為例
1.安裝vscodehttps://code.visualstudio.com/
2.安裝vetur 插件點(diǎn)擊install安裝
3.vscode 命令行權(quán)限不足的問(wèn)題: 例如執(zhí)行vue、yarn等命令報(bào)錯(cuò) 在安裝了@vue/cli提示vue不是內(nèi)部命令這種情況，應(yīng)該以管理員身份運(yùn)行powerell命令行
4.如果在powerell也無(wú)法運(yùn)行對(duì)應(yīng)的命令就是沒(méi)有設(shè)置對(duì)應(yīng)的環(huán)境變量，比如yarn安裝了，并且用yarn下載了@vue/cli 那么 vue不是內(nèi)部命令就是yarn或者vue沒(méi)有配置對(duì)應(yīng)的環(huán)境變量，這里yarn環(huán)境配置 默認(rèn)位置 ：C:\Users\Mx\AppData\Local\Yarn\bin
配置完成后再重新安裝@vue/cli就行了
執(zhí)行命令 設(shè)置權(quán)限
get-ExecutionPolicy
set-ExecutionPolicy RemoteSigned選擇并輸入Y或者A，然后再重新啟動(dòng)vscode打開(kāi)命令行就好。
項(xiàng)目應(yīng)用構(gòu)建
基于Vue-cli構(gòu)建Vue單頁(yè)面應(yīng)用程序
1.打開(kāi)命令行安裝vue-cli腳手架工具(已安裝跳過(guò)此步驟)
npm install -g @vue/cli
# OR(或)
yarn global add @vue/cli
# 通過(guò)查看版本檢查是否安裝成功
vue --version2.命令行運(yùn)行命名創(chuàng)建新項(xiàng)目
# 創(chuàng)建名為mxdraw-test-vue3 的一個(gè)新Vue項(xiàng)目
vue create mxdraw-test-vue3
# 如果選擇default則會(huì)直接創(chuàng)建項(xiàng)目，創(chuàng)建項(xiàng)目包括babel\eslin這些工具，比如Router/Vuex等其他依賴(lài)需要自己手動(dòng)安裝
? P1ease pick a preset:
# 默認(rèn)選項(xiàng)
Default (vue 3)([vue 3] babel, eslint)
# 手動(dòng)選擇功能
Manually select features如果選擇Manually select features(手動(dòng)安裝)則會(huì)進(jìn)入下一步選項(xiàng)：（這里推薦大家進(jìn)行手動(dòng)配置）
? Check the features needed for your project :
(*) Choose vue version # 選擇vue版本
(*) Babel # 代碼編譯
(*) TypeScript # ts
( ) Progressive Web App (PWA)Support # 支持漸進(jìn)式網(wǎng)頁(yè)應(yīng)用程序
(*) Router # vue路由
( ) vuex # 狀態(tài)管理模式
( ) css Pre-processors # css預(yù)處理
(*) Linter ; Formatter # 代碼風(fēng)格、格式校驗(yàn)
( ) Unit Testing # 單元測(cè)試
( ) E2E Testing # 端對(duì)端測(cè)試TypeScript 選項(xiàng)配置
# 選擇使用哪個(gè)版本的vue框架
? Choose a version of Vue.js that you want to start the project with
2.x # vue2.x
3.x # vue3.x
# 詢(xún)問(wèn)的是是否使用class風(fēng)格的組件語(yǔ)法，如果在項(xiàng)目中想要保持使用TypeScript的class風(fēng)格的話，建議大家選擇y。
? Use class-style component syntax? (Y/n)
# 使用Babel與TypeScript一起用于自動(dòng)檢測(cè)的填充?這里一定要選擇y
? Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? (Y/n)Router 選項(xiàng)配置
# 路由是否使用history模式？如果項(xiàng)目中存在要求就使用history(即:y)，但是一般還是推薦大家使用ha模式，畢竟history模式需要依賴(lài)運(yùn)維。
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n)CSS Pre-processors css 選項(xiàng)配置
# 選擇一種CSS預(yù)處理類(lèi)型，根據(jù)各個(gè)項(xiàng)目的要求使用對(duì)應(yīng)css編譯處理
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass)
Sass/SCSS (with node-sass)
Less
StylusLinter / Formatter 選項(xiàng)配置
# TSLint只有在選擇TypeScript時(shí)才會(huì)存在。
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only # 只進(jìn)行報(bào)錯(cuò)提醒
ESLint + Airbnb config # 不嚴(yán)謹(jǐn)模式
ESLint + Standard config # 正常模式
ESLint + Prettier # 嚴(yán)格模式
TSLint (deprecated) # TypeScript格式驗(yàn)證工具
# 選擇校驗(yàn)時(shí)機(jī)，一般都會(huì)選擇保存時(shí)校驗(yàn)，好及時(shí)做出調(diào)整
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
(*) Lint on save # 保存時(shí)檢測(cè)
( ) Lint and fix on commit # 修復(fù)和提交時(shí)檢測(cè)Unit Testing 選項(xiàng)配置
# 選擇單元測(cè)試解決方案，普遍用到最多的是Mocha + chai
? Pick a unit testing solution: (Use arrow keys)
> Mocha + Chai
JestE2E Testing E2E（End To End）選項(xiàng)配置
# 選擇端對(duì)端測(cè)試的類(lèi)型
? Pick a E2E testing solution: (Use arrow keys)
> Cypress (Chrome only)
Nightwatch (WebDriver-based)額外選項(xiàng)
# 選擇Babel,PostCSS, ESLint等自定義配置的存放位置。這里建議大家選擇第一個(gè)
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files # 存放在專(zhuān)用配置文件中
In package.json # 存放在package.json中
# 是否保存當(dāng)前選擇的配置項(xiàng)，如果當(dāng)前配置是經(jīng)常用到的配置，建議選擇y存儲(chǔ)一下當(dāng)前配置項(xiàng)
? Save this as a preset for future projects? (y/N)
# 選擇n之后則會(huì)直接開(kāi)始創(chuàng)建項(xiàng)目了，選擇y之后則會(huì)輸入一個(gè)存儲(chǔ)當(dāng)前配置項(xiàng)的名稱(chēng):
? Save preset as:3.運(yùn)行項(xiàng)目
cd mxdraw-test-vue3
yarn serve詳細(xì)說(shuō)明請(qǐng)參考 [vue-cli文檔指南]
vue框架使用請(qǐng)參考[Vue.js 中文文檔]
安裝 npm
yarn add mxdraw 或 npm install mxdraw用法
1.引入
import Mx from "mxdraw"2.加載
<canvas id="mxcad">
</canvas>3.javascript
import Mx from "mxdraw"
// 動(dòng)態(tài)加載 js庫(kù)核心代碼
Mx.loadCoreCode().then(()=> {
// Mx.MxFun.setMxServer("ws://localhost:5090") // 開(kāi)啟socket通信 可編輯圖紙
// 創(chuàng)建控件對(duì)象
Mx.MxFun.createMxObject({
canvasId: "mxcad", // canvas元素的id
cadFile: "/demo/buf/$hhhh.dwg.mxb1.wgh", // http方式(預(yù)覽): 加載public/demo文件夾下轉(zhuǎn)換后的圖紙
// cadFile: "test2.dwg", // socket通信方式請(qǐng)直接提供圖紙名稱(chēng) 如：text.dwg
callback: (mxDraw, {
canvas,
canvasParent
})=> {
// 可以拿到canvas元素和它的父級(jí)元素
console.log(canvas, canvasParent)
console.log(mxDraw)
// 拿到圖層數(shù)據(jù)
mxDraw.addEvent('uiSetLayerData', (listLayer)=> {
console.log(listLayer)
})
},
isNewFile: true // 是否新建文件
})
})如何實(shí)現(xiàn)一個(gè)畫(huà)線的功能命令?
1.實(shí)現(xiàn)畫(huà)線功能
參考資料:
* [MrxDbgUiPrPoint | getPoint] 構(gòu)建取點(diǎn)對(duì)象
* [status] MrxDbgUiPrBaseReturn表示對(duì)應(yīng)狀態(tài)
* [McEdGetPointWorldDrawObject | pWorldDraw] 用于構(gòu)建一個(gè)動(dòng)態(tài)繪制回調(diào)對(duì)象
* [pt1 | pt2 | lastPt] THREE.Vector3 數(shù)據(jù)類(lèi)型
javascript
import Mx from "mxdraw"
// 畫(huà)線的函數(shù)
function BR_Line() {
// 構(gòu)建取點(diǎn)對(duì)象
const getPoint=new Mx.MrxDbgUiPrPoint();
// 構(gòu)建動(dòng)態(tài)繪制對(duì)象
const worldDrawComment=new Mx.McEdGetPointWorldDrawObject();
// 開(kāi)始動(dòng)態(tài)拖動(dòng) 行為: 鼠標(biāo)點(diǎn)擊畫(huà)布時(shí)只執(zhí)行一次回調(diào)函數(shù)，后續(xù)點(diǎn)擊無(wú)效
getPoint.go((status)=> {
if (status !==0) {
return;
}
// 獲取鼠標(biāo)在畫(huà)布上的第一個(gè)點(diǎn)
const pt1=getPoint.value();
// 將第一個(gè)點(diǎn)作為起始點(diǎn)
let lastPt=pt1.clone();
// 設(shè)置動(dòng)態(tài)繪制的回調(diào)函數(shù)
worldDrawComment.setDraw((currentPoint, pWorldDraw)=> {
// 繪制當(dāng)前鼠標(biāo)移動(dòng)點(diǎn)到起始點(diǎn)的線段
pWorldDraw.drawLine(currentPoint, lastPt);
});
// 設(shè)置取點(diǎn)對(duì)象交互過(guò)程中的動(dòng)態(tài)繪制調(diào)用對(duì)象
getPoint.setUserDraw(worldDrawComment)
// 開(kāi)啟動(dòng)態(tài)拖動(dòng)，連續(xù)取點(diǎn)，直到ESC退出。 行為: 鼠標(biāo)點(diǎn)擊一下執(zhí)行一次回調(diào)函數(shù)
getPoint.goWhile((status)=> {
if (status===0) {
// 獲取第二個(gè)點(diǎn)的位置
const pt2=getPoint.value();
// 拿到Three的場(chǎng)景對(duì)象
let sence=Mx.MxFun.getCurrentDraw().getScene();
// 創(chuàng)建一條 從起始點(diǎn)到 當(dāng)前點(diǎn)擊位置的線段
let line=Mx.MxThreeJS.createLine(lastPt, pt2, 0xffffff);
// 將線段添加到場(chǎng)景中
sence.add(line);
// 將第二點(diǎn)作為起始點(diǎn)
lastPt=pt2
}
});
});
}2.注冊(cè)使用命名
參考資料:
* [MxFun.addCommand] 注冊(cè)命名方法
* [MxFun.sendStringToExecute] 執(zhí)行命名方法
* [MxFun.isRunningCommand]檢查是否有命令在運(yùn)行
javascript
import Mx from "mxdraw"
// 注冊(cè)命名
Mx.MxFun.addCommand("BR_Line", ()=> {
if(Mx.MxFun.isRunningCommand()) {
return
}
BR_Line()
})
// 執(zhí)行命令
Mx.MxFun.sendStringToExecute("BR_Line")
更多Api使用說(shuō)明請(qǐng)參考[Mx模塊集]對(duì)應(yīng)模塊中的Api接口說(shuō)明
按需引入配置
使用babel插件babel-plugin-import 實(shí)現(xiàn)按需引入
需要安裝 npm i babel-plugin-import-D 然后找到或創(chuàng)建項(xiàng)目根目錄的 .babelrc文件新增如下內(nèi)容：
json
{
"plugins": [
[
"import", {
"libraryName": "mxdraw",
"libraryDirectory": "dist/lib/MxModule",
"camel2UnderlineComponentName": false,
"camel2DaComponentName": false
}
]
]
}基于babel-plugin-import 按需引入
javascript
import { MxFun } from "mxdraw"或者直接通過(guò)import MxFun from "mxdraw/dist/lib/MxModule/MxFun" 這樣的方式直接引入對(duì)應(yīng)模塊
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
