使用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小时内与您取得联系。

整合营销服务商