使用js插件在前端頁(yè)面上畫(huà)圖

前沒(méi)有使用過(guò)前端java Script插件，所以一直認(rèn)為很難來(lái)著，今天突然在網(wǎng)上搜尋了一波，21種前端java Script插件，我選擇的是Echarts。點(diǎn)擊打開(kāi)鏈接

ECharts，縮寫(xiě)來(lái)自Enterprise Charts，商業(yè)級(jí)數(shù)據(jù)圖表，一個(gè)純Javascript的圖表庫(kù)，可以流暢的運(yùn)行在PC和移動(dòng)設(shè)備上，兼容當(dāng)前絕大部分瀏覽器（IE6/7/8/9/10/11，chrome，firefox，Safari等），底層依賴(lài)輕量級(jí)的Canvas類(lèi)庫(kù)ZRender，提供直觀，生動(dòng)，可交互，可高度個(gè)性化定制的數(shù)據(jù)可視化圖表。創(chuàng)新的拖拽重計(jì)算、數(shù)據(jù)視圖、值域漫游等特性大大增強(qiáng)了用戶(hù)體驗(yàn)，賦予了用戶(hù)對(duì)數(shù)據(jù)進(jìn)行挖掘、整合的能力。

支持折線圖（區(qū)域圖）、柱狀圖（條狀圖）、散點(diǎn)圖（氣泡圖）、K線圖、餅圖（環(huán)形圖）、雷達(dá)圖（填充雷達(dá)圖）、和弦圖、力導(dǎo)向布局圖、地圖、儀表盤(pán)、漏斗圖、事件河流圖等12類(lèi)圖表，同時(shí)提供標(biāo)題，詳情氣泡、圖例、值域、數(shù)據(jù)區(qū)域、時(shí)間軸、工具箱等7個(gè)可交互組件，支持多圖表、組件的聯(lián)動(dòng)和混搭展現(xiàn)。

1.創(chuàng)建一個(gè)index.html,如下：

[html] view plain copy

<!DOCTYPE html>
<html>
<head>
<metacharset="utf-8">
<title>ECharts</title>
<scriptsrc="echarts.js"></script>
</head>
<body>
<divid="main"style="width: 600px;height:400px;"></div>
<scripttype="text/javascript">
// 基于準(zhǔn)備好的dom，初始化echarts實(shí)例
var myChart=echarts.init(document.getElementById('main'));
// 指定圖表的配置項(xiàng)和數(shù)據(jù)
var option={
title: {
text: 'ECharts 入門(mén)示例'
},
tooltip: {},
legend: {
data:['銷(xiāo)量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷(xiāo)量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項(xiàng)和數(shù)據(jù)顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>

其中需要導(dǎo)入echarts，這個(gè)從官網(wǎng)上下，尋找適合的，鏈接在上面。

2.然后通過(guò)修改上面一列的屬性，構(gòu)建圖標(biāo)，上述圖表如下：

于學(xué)習(xí)js是為爬蟲(chóng)服務(wù)，所以canvas繪圖學(xué)習(xí)并不完整。

第15章使用Canvas繪圖

15.1 基本用法

HTML文件中需要有canvas元素，兩標(biāo)簽之間的文字是瀏覽器不支持時(shí)顯示的。

<canvas id="drawing" width="200" height="200">A drawing of something.</canvas>

要在網(wǎng)頁(yè)中顯示canvas繪制的圖像，只需要在畫(huà)布上繪制圖形即可：

var drawing=document.getElementById("drawing");

if (drawing.getContext){
    var context=drawing.getContext("2d");

    context.fillStyle="#0000ff";
    context.fillRect(10,10,50,50);

    context.fillStyle="rgba(0,0,255,0.5)";
    context.fillRect(30,30,50,50);
}

也可以通過(guò)toDataURL輸出到圖像，并創(chuàng)建新的img：

var drawing=document.getElementById("drawing");

// 取得圖像的數(shù)據(jù)URI
var imgURI=drawing.toDataURL("image/png");
// 顯示圖像

var image=document.createElement("img");
image.src=imgURI;
document.body.appendChild(image);

15.2 2D上下文

15.2.1 填充和描邊

可通過(guò)strokeStyle和fillStyle屬性進(jìn)行設(shè)置

var context=drawing.getContext("2d");
context.strokeStyle="red";
context.fillStyle="#0000ff";

設(shè)置屬性有以下幾種：

"red"
"#0000ff"
"rgba(0,0,255,0.5)"
context.strokeStyle="red";

15.2.2 繪制矩形

繪制矩形有fillRect（帶有填充）、strokeRect（無(wú)填充）、clearRect（除清矩形區(qū)域）三個(gè)方法，單位為像素：

var drawing=document.getElementById("drawing");

if (drawing.getContext){
    var context=drawing.getContext("2d");
    // 紅色的矩形

    context.fillStyle="#ff0000";
    context.fillRect(10,10,50,50);
    // 半透明的矩形

    context.fillStyle="rgba(0,0,255,0.5)";
    context.fillRect(30,30,50,50);
}

15.2.3 繪制路徑

以beginPath()方法開(kāi)始，然后接著繪制以下線條：

arc(x, y, radius, startAngle, endAngle, counterclockwise)：以(x,y)為圓心繪制一條弧線，弧線半徑為radius，起始和結(jié)束角度（用弧度表示）分別為startAngle 和endAngle。最后一個(gè)參數(shù)表示
startAngle 和endAngle 是否按逆時(shí)針?lè)较蛴?jì)算，值為false表示按順時(shí)針?lè)较蛴?jì)算。
arcTo(x1, y1, x2, y2, radius)：從上一點(diǎn)開(kāi)始繪制一條弧線，到(x2,y2)為止，并且以給定的半徑radius 穿過(guò)(x1,y1)。
bezierCurveTo(c1x, c1y, c2x, c2y, x, y)：從上一點(diǎn)開(kāi)始繪制一條曲線，到(x,y)為止，并且以(c1x,c1y)和(c2x,c2y)為控制點(diǎn)。
lineTo(x, y)：從上一點(diǎn)開(kāi)始繪制一條直線，到(x,y)為止。
moveTo(x, y)：將繪圖游標(biāo)移動(dòng)到(x,y)，不畫(huà)線。
quadraticCurveTo(cx, cy, x, y)：從上一點(diǎn)開(kāi)始繪制一條二次曲線，到(x,y)為止，并且以(cx,cy)作為控制點(diǎn)。
rect(x, y, width, height)：從點(diǎn)(x,y)開(kāi)始繪制一個(gè)矩形，寬度和高度分別由width 和height 指定。這個(gè)方法繪制的是矩形路徑，而不是strokeRect()和fillRect()所繪制的獨(dú)立的形狀。

路徑創(chuàng)建完以后，有多種結(jié)尾方式：

closePath()會(huì)自動(dòng)與起點(diǎn)連接；
fill()會(huì)自動(dòng)以fillStyle填充區(qū)域；
stroke()會(huì)對(duì)線條描邊；
clip()創(chuàng)建一個(gè)剪切區(qū)域。

15.2.4 繪制文本

方法：

fillText()
strokeText()

屬性：

font
textAlign start、end、left、right、center
textBaseline top、hanging、middle、alphabetic、ideographic、bottom

言

mxcad3d是基于mxdraw的基礎(chǔ)上，使用TypeScript和C++語(yǔ)言開(kāi)發(fā)的一個(gè)網(wǎng)頁(yè)三維CAD參數(shù)化建模框架，我們?yōu)殚_(kāi)發(fā)者提供了豐富的參數(shù)化建模的開(kāi)發(fā)接口，用戶(hù)可以高效、便捷的對(duì)基本圖元進(jìn)行創(chuàng)建、同時(shí)豐富的JS開(kāi)發(fā)接口方便了用戶(hù)實(shí)現(xiàn)復(fù)雜的模型創(chuàng)建和CAD二次開(kāi)發(fā)，網(wǎng)頁(yè)測(cè)試DEMO鏈接如下：在線CAD夢(mèng)想畫(huà)圖。

功能簡(jiǎn)介

參數(shù)化創(chuàng)建：方塊、圓柱、圓錐、球體、圓環(huán)、楔形、拉伸、旋轉(zhuǎn)體、放樣、管道等。

幾何運(yùn)算：形位變換、平移、縮放、旋轉(zhuǎn)、鏡像。

布爾運(yùn)算：交集、差集、并集、相交輪廓。

倒角運(yùn)算：圓角、斜角。

幾何繪線：直線、圓、橢圓、雙曲線、拋物線、B樣條曲線、Bezier曲線等的繪制。

幾何繪面：平面、B樣條曲面、Bezier曲面的創(chuàng)建。

支持格式

step/stp，iges/igs，stl，obj，vrml/wrl，gltf等格式文件。

程序運(yùn)行

新建項(xiàng)目、安裝依賴(lài)

首先，在某路徑下新建一個(gè)文件夾TestMxCad3D作為項(xiàng)目文件夾，在TestMxCad3D 目錄中打開(kāi)cmd命令行程序運(yùn)行以下命令來(lái)初始化項(xiàng)目并安裝 vite和 mxcad。

npm init -y
npm install vite -D
npm install mxcad@latest

新建index.html文件

然后，在項(xiàng)目根目錄下新建index.html文件，并繪制canvas畫(huà)布，參考代碼如下：

<!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>vite use mxcad</title>
</head>
<body>
<div style="height: 800px;"> <canvas id="myCanvas"></canvas></div>
</body>
</html>

新建index.ts文件

在src目錄下新建index.ts文件（vite默認(rèn)支持ts），代碼如下：

import { MxCAD3DObject } from "mxcad"
// 創(chuàng)建mxcad3d對(duì)象
const mxcad3d=new MxCAD3DObject()
// 初始化mxcad3d對(duì)象
mxcad3d.create({
 // canvas元素的css選擇器字符串（示例中是id選擇器），或canvas元素對(duì)象
 canvas: "#myCanvas",
 // 獲取加載wasm相關(guān)文件(wasm/js/worker.js)路徑位置
 locateFile: (fileName)=> new URL(`/node_modules/mxcad/dist/wasm/3d/${fileName}`, import.meta.url).href,
})
// 初始化完成
mxcad3d.on("init", ()=>{
 console.log("初始化完成");
});

index.html中引入index.ts

mxcad3d中的create()方法需要等canvas元素在頁(yè)面加載完成后才能調(diào)用，因此需要將 script 標(biāo)簽放在 body 標(biāo)簽內(nèi)部，讓瀏覽器先完成HTML頁(yè)面的解析，再下載并執(zhí)行script標(biāo)簽中的代碼。

<!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>vite use mxcad</title>
</head>
<body>
 <div style="height: 800px; overflow: hidden;"> <canvas id="myCanvas"></canvas></div>
 <script type="module" src="./src/index.ts"></script>
</body>
</html>

啟動(dòng)網(wǎng)頁(yè)服務(wù)、運(yùn)行網(wǎng)頁(yè)

完成以上步驟后，運(yùn)行下面的命令啟動(dòng)項(xiàng)目,輸入命令：npx vite，打開(kāi)網(wǎng)頁(yè).如下圖：

以上代碼會(huì)創(chuàng)建一個(gè)MxCAD3DObjectl類(lèi)型的對(duì)象mxcad3d，并在初始化完成后輸出一條消息，mxcad3d代表的是一個(gè)文檔視圖對(duì)象，能把創(chuàng)建的模型數(shù)據(jù)保存到文檔，并且顯示到視圖上。此時(shí)你將會(huì)在瀏覽器中看到一個(gè)三維視圖窗口，如下圖：

繪制方塊

要在視圖中繪制一個(gè)方塊，可以通過(guò)以下代碼實(shí)現(xiàn)：

import { MxCAD3DObject, Mx3dMkBox, Mx3dGePoint } from "mxcad"
// 創(chuàng)建按鈕
function createButton(text: string, fn: (...args)=> void) {
 const button=document.createElement("button");
 button.innerText=text;
 document.body.appendChild(button);
 button.onclick=fn;
}
/**
 * 繪制方塊
 */
function drawBox()
{
 // 獲取文檔
 const doc=mxcad3d.getDocument();
 const pt1=new Mx3dGePoint(5, 5, 5);
 const pt2=new Mx3dGePoint(15, 15, 15);
 // 構(gòu)造BOX
 const boxMaker=new Mx3dMkBox(pt1, pt2);
 // 獲取拓?fù)湫螤?
 const boxShape=boxMaker.Shape();
 // 文檔中創(chuàng)建一個(gè)標(biāo)簽
 const boxLabel=doc.addShapeLabel();
 // 添加拓?fù)湫螤畹綐?biāo)簽中
 boxLabel.setShape(boxShape);
 // 更新顯示（會(huì)更新canvas中顯示的模型）
 mxcad3d.update();
}
// 創(chuàng)建mxcad3d示例對(duì)象
const mxcad3d=new MxCAD3DObject()
// 初始化
mxcad3d.create({
 // canvas元素的css選擇器字符串（示例中是id選擇器），或canvas元素對(duì)象
 canvas: "#myCanvas",
 // 獲取加載wasm相關(guān)文件(wasm/js/worker.js)路徑位置
 locateFile: (fileName)=> new URL(`/node_modules/mxcad/dist/wasm/3d/${fileName}`, import.meta.url).href,
})
// 初始化完成
mxcad3d.on("init", ()=>{
 console.log("初始化完成");
 createButton("繪制方塊", drawBox);
});

以上代碼新增了一個(gè)名為drawBox的函數(shù)，該函數(shù)會(huì)在畫(huà)布中繪制一個(gè)方塊。通過(guò)創(chuàng)建一個(gè)按鈕，并在按鈕的單擊事件中調(diào)用drawBox函數(shù)，可以觸發(fā)方塊的繪制。

通過(guò)以上步驟，你可以在瀏覽器中看到一個(gè)帶有三維視圖窗口的頁(yè)面，點(diǎn)擊"繪制方塊"按鈕，即可在視圖中繪制一個(gè)方塊，如下圖所示：

mxcad3d提供了強(qiáng)大的功能和靈活的開(kāi)發(fā)接口，通過(guò)這些接口能夠創(chuàng)建更多復(fù)雜的三維模型。

在線咨詢(xún)

上一篇：有了油猴“插件”（Tampermonkey），這些腳
下一篇：CentOS 7環(huán)境下利用pgcluu生成動(dòng)態(tài)報(bào)告(

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商