使用js插件在前端頁面上畫圖

前沒有使用過前端java Script插件，所以一直認為很難來著，今天突然在網上搜尋了一波，21種前端java Script插件，我選擇的是Echarts。點擊打開鏈接

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

支持折線圖（區域圖）、柱狀圖（條狀圖）、散點圖（氣泡圖）、K線圖、餅圖（環形圖）、雷達圖（填充雷達圖）、和弦圖、力導向布局圖、地圖、儀表盤、漏斗圖、事件河流圖等12類圖表，同時提供標題，詳情氣泡、圖例、值域、數據區域、時間軸、工具箱等7個可交互組件，支持多圖表、組件的聯動和混搭展現。

1.創建一個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">
// 基于準備好的dom，初始化echarts實例
var myChart=echarts.init(document.getElementById('main'));
// 指定圖表的配置項和數據
var option={
title: {
text: 'ECharts 入門示例'
},
tooltip: {},
legend: {
data:['銷量']
},
xAxis: {
data: ["襯衫","羊毛衫","雪紡衫","褲子","高跟鞋","襪子"]
},
yAxis: {},
series: [{
name: '銷量',
type: 'bar',
data: [5, 20, 36, 10, 10, 20]
}]
};
// 使用剛指定的配置項和數據顯示圖表。
myChart.setOption(option);
</script>
</body>
</html>

其中需要導入echarts，這個從官網上下，尋找適合的，鏈接在上面。

2.然后通過修改上面一列的屬性，構建圖標，上述圖表如下：

于學習js是為爬蟲服務，所以canvas繪圖學習并不完整。

第15章使用Canvas繪圖

15.1 基本用法

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

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

要在網頁中顯示canvas繪制的圖像，只需要在畫布上繪制圖形即可：

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);
}

也可以通過toDataURL輸出到圖像，并創建新的img：

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

// 取得圖像的數據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 填充和描邊

可通過strokeStyle和fillStyle屬性進行設置

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

設置屬性有以下幾種：

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

15.2.2 繪制矩形

繪制矩形有fillRect（帶有填充）、strokeRect（無填充）、clearRect（除清矩形區域）三個方法，單位為像素：

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()方法開始，然后接著繪制以下線條：

arc(x, y, radius, startAngle, endAngle, counterclockwise)：以(x,y)為圓心繪制一條弧線，弧線半徑為radius，起始和結束角度（用弧度表示）分別為startAngle 和endAngle。最后一個參數表示
startAngle 和endAngle 是否按逆時針方向計算，值為false表示按順時針方向計算。
arcTo(x1, y1, x2, y2, radius)：從上一點開始繪制一條弧線，到(x2,y2)為止，并且以給定的半徑radius 穿過(x1,y1)。
bezierCurveTo(c1x, c1y, c2x, c2y, x, y)：從上一點開始繪制一條曲線，到(x,y)為止，并且以(c1x,c1y)和(c2x,c2y)為控制點。
lineTo(x, y)：從上一點開始繪制一條直線，到(x,y)為止。
moveTo(x, y)：將繪圖游標移動到(x,y)，不畫線。
quadraticCurveTo(cx, cy, x, y)：從上一點開始繪制一條二次曲線，到(x,y)為止，并且以(cx,cy)作為控制點。
rect(x, y, width, height)：從點(x,y)開始繪制一個矩形，寬度和高度分別由width 和height 指定。這個方法繪制的是矩形路徑，而不是strokeRect()和fillRect()所繪制的獨立的形狀。

路徑創建完以后，有多種結尾方式：

closePath()會自動與起點連接；
fill()會自動以fillStyle填充區域；
stroke()會對線條描邊；
clip()創建一個剪切區域。

15.2.4 繪制文本

方法：

fillText()
strokeText()

屬性：

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

言

mxcad3d是基于mxdraw的基礎上，使用TypeScript和C++語言開發的一個網頁三維CAD參數化建模框架，我們為開發者提供了豐富的參數化建模的開發接口，用戶可以高效、便捷的對基本圖元進行創建、同時豐富的JS開發接口方便了用戶實現復雜的模型創建和CAD二次開發，網頁測試DEMO鏈接如下：在線CAD夢想畫圖。

功能簡介

參數化創建：方塊、圓柱、圓錐、球體、圓環、楔形、拉伸、旋轉體、放樣、管道等。

幾何運算：形位變換、平移、縮放、旋轉、鏡像。

布爾運算：交集、差集、并集、相交輪廓。

倒角運算：圓角、斜角。

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

幾何繪面：平面、B樣條曲面、Bezier曲面的創建。

支持格式

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

程序運行

新建項目、安裝依賴

首先，在某路徑下新建一個文件夾TestMxCad3D作為項目文件夾，在TestMxCad3D 目錄中打開cmd命令行程序運行以下命令來初始化項目并安裝 vite和 mxcad。

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

新建index.html文件

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

<!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默認支持ts），代碼如下：

import { MxCAD3DObject } from "mxcad"
// 創建mxcad3d對象
const mxcad3d=new MxCAD3DObject()
// 初始化mxcad3d對象
mxcad3d.create({
 // canvas元素的css選擇器字符串（示例中是id選擇器），或canvas元素對象
 canvas: "#myCanvas",
 // 獲取加載wasm相關文件(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元素在頁面加載完成后才能調用，因此需要將 script 標簽放在 body 標簽內部，讓瀏覽器先完成HTML頁面的解析，再下載并執行script標簽中的代碼。

<!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>

啟動網頁服務、運行網頁

完成以上步驟后，運行下面的命令啟動項目,輸入命令：npx vite，打開網頁.如下圖：

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

繪制方塊

要在視圖中繪制一個方塊，可以通過以下代碼實現：

import { MxCAD3DObject, Mx3dMkBox, Mx3dGePoint } from "mxcad"
// 創建按鈕
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);
 // 構造BOX
 const boxMaker=new Mx3dMkBox(pt1, pt2);
 // 獲取拓撲形狀
 const boxShape=boxMaker.Shape();
 // 文檔中創建一個標簽
 const boxLabel=doc.addShapeLabel();
 // 添加拓撲形狀到標簽中
 boxLabel.setShape(boxShape);
 // 更新顯示（會更新canvas中顯示的模型）
 mxcad3d.update();
}
// 創建mxcad3d示例對象
const mxcad3d=new MxCAD3DObject()
// 初始化
mxcad3d.create({
 // canvas元素的css選擇器字符串（示例中是id選擇器），或canvas元素對象
 canvas: "#myCanvas",
 // 獲取加載wasm相關文件(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);
});

以上代碼新增了一個名為drawBox的函數，該函數會在畫布中繪制一個方塊。通過創建一個按鈕，并在按鈕的單擊事件中調用drawBox函數，可以觸發方塊的繪制。

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

mxcad3d提供了強大的功能和靈活的開發接口，通過這些接口能夠創建更多復雜的三維模型。

在線咨詢

上一篇：有了油猴“插件”（Tampermonkey），這些腳
下一篇：CentOS 7環境下利用pgcluu生成動態報告(

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商