基于 HTML5 Canvas 的拓扑组件开发

2024-08-30 11:08
文章标签 html5 组件 开发 canvas frontend 拓扑

本文主要是介绍基于 HTML5 Canvas 的拓扑组件开发，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

在现在前端圈大行其道的 React 和 Vue 中，可复用的组件可能是他们大受欢迎的原因之一，

在 HT 的产品中也有组件的概念，不过在 HT 中组件的开发是依托于 HTML5 Canvas 的技术去实现的，

也就是说如果你有过使用 Canvas 的开发经验你就可以来封装自己的组件。

下面我以一个进度环为例，来探究一下如何使用ht.js封装出一个拓扑组件。

效果图

代码实现

前置知识

自定义组件

除了HT预定义的组件类型外，用户还可以自定义扩展类型，自定义有两种方式：

  • 直接将type值设置成绘制函数：function(g, rect, comp, data, view){}
  • 通过ht.Default.setCompType(name, funtion(g, rect, comp, data, view){})注册组件类型，矢量type值设置成相应的注册名

在这里我选用第一种通过形如

ht.Default.setImage('circle-progress-bar', { width: 100, height: 100, comps: [ { type: function(g, rect, comp, data, view) { // ... } } ] });

这样的方式完成组件的声明，那么 function(g, rect, comp, data, view) { }中的内容就是我们接下来需要关注的了

准备工作

  1. 抽象并声明出几个 Coding 中需要的变量

    • 进度百分比 progressPercentage {百分比}
    • 圆环渐变色 linearOuter {颜色数组}
    • 内圆渐变色 linearInner {颜色数组}
    • 字体缩放比例 fontScale {数字}
    • 显示原始值 showOrigin {布尔}
    • 进度条样式 progressLineCap {线帽样式}

  2. 变量的声明和赋值了

    var x = rect.x;
var y = rect.y;
var rectWidth = rect.width;
var rectHeight = rect.height;
var width = rectWidth < rectHeight ? rectWidth : rectHeight;
var progressPercentage = parseFloat((data.a('progressPercentage') * 100).toFixed(10));
var fontScale = data.a('fontScale');
var showOrigin = data.a('showOrigin');
var backgroundColor = data.a('backgroundColor');
var progressLineCap = data.a('progressLineCap');
var fontSize = 16; // 字体大小
var posX = x + rectWidth / 2; // 圆心 x 坐标
var posY = y + rectHeight / 2; // 圆心 y 坐标
var circleLineWidth = width / 10; // 圆环线宽
var circleRadius = (width - circleLineWidth) / 2; // 圆环半径
var circleAngle = {sAngle: 0, eAngle: 2 * Math.PI}; // 绘制背景圆和圆环内圆所需的角度
var proStartAngel = Math.PI; // 进度环起始角度
var proEndAngel = proStartAngel + ((Math.PI * 2) / 100) * progressPercentage; // 进度环结束角度

  3. 创建渐变色样式

    var grd = context.createLinearGradient(x1, y1, x2, y2);
grd.addColorStop(0, 'red');   
grd.addColorStop(1, 'blue');

    在 Canvas 中的渐变色是按照如上方式来创建的，但是在一个组件中去如果一个一个去添加显然是去组件的理念是背道而驰的，所以我选择封装一个函数根据颜色数组中的各个颜色来生成渐变色样式

    // 创建渐变色样式函数
function addCreateLinear(colorsArr) {var linear = rectWidth < rectHeight? g.createLinearGradient(x, posY - width / 2, width, posY + width / 2): g.createLinearGradient(posX - width / 2, y, posX + width / 2, width);var len = colorsArr.length;for (var key in colorsArr) {linear.addColorStop((+key + 1) / len, colorsArr[key]);}return linear;
}
// 创建渐变填充颜色
var linearOuter = addCreateLinear(data.a('linearOuter'));
var linearInner = addCreateLinear(data.a('linearInner'));

开始 Coding

准备工作结束后下面就是 Canvas 的时间了

  1. 绘制背景圆

    g.beginPath();
g.arc(posX, posY, circleRadius, circleAngle.sAngle, circleAngle.eAngle);
g.closePath();
g.fillStyle = backgroundColor;
g.fill();
g.lineWidth = circleLineWidth;
g.strokeStyle = backgroundColor;
g.stroke();

  2. 绘制进度环

    g.beginPath();
g.arc(posX, posY, circleRadius, proStartAngel, proEndAngel);
g.strokeStyle = linearOuter;
g.lineWidth = circleLineWidth;
g.lineCap = progressLineCap;
if (progressPercentage !== 0) g.stroke();

  3. 绘制中心圆

    g.beginPath();
g.fillStyle = linearInner;
g.arc(posX, posY, circleRadius - circleLineWidth / 2 - 1, 0, Math.PI * 2, false);
g.strokeStyle = '#0A2E44';
g.fill();
g.lineWidth = 2;
g.stroke();

  4. 绘制文字

    g.fillStyle = 'white';
g.textAlign = 'center';
g.font = fontSize + 'px Arial';
g.translate(posX * (1 - fontScale), posY * (1 - fontScale));
g.scale(fontScale, fontScale);
showOrigin? g.fillText(progressPercentage / 100, posX, posY + fontSize / 3): g.fillText(progressPercentage + '%', posX, posY + fontSize / 3);

    最后通过简单的配置就可以在网页上呈现出这个进度环了

    var dataModel = new ht.DataModel();
var graphView = new ht.graph.GraphView(dataModel);
var circle1 = new ht.Node();
circle1.setPosition(150, 150);
circle1.setSize(200, 200);
circle1.setImage('circle-progress-bar');
circle1.a({progressPercentage: 0.48,linearOuter: ['#26a67b', '#0474d6'],linearInner: ['#004e92', '#000000'],fontScale: 1,showOrigin: true,progressLineCap: 'butt',backgroundColor: 'rgb(61,61,61)'
});
dataModel.add(circle1);
// 这次多生成几个 不过代码相似 在此就不赘述了

    完整代码如下

    View Code

几点心得

声明属性

在这个部分有几点可供参考

  • 使用小驼峰对属性进行命名，并且少用缩写尽量语义化

    举个栗子：

    • fontScale 字体缩放比例
    • progressPercentage 进度百分比

  • 属性值类型的选择也要尽量贴合属性的含义

    举个栗子：

    • 一个存储着几个颜色值字符串的数组，用颜色数组就比单纯的数组更为贴切
    • 一个表示画笔线帽种类的字符串，用线帽样式就比字符转更为贴切

使用属性

由于进度环是一个圆形的组件，那么在这里有两点供参考

  • 当组件的 rect.width 和 rect.height 不相等的时候我们需要自己来设定一个 width，

    让圆在这个以 width 为边的正方形中绘制，而 width 的值就是 rect.width 和 rect.height 中较短的一边，

    而这么做的理由是这样绘制圆自适应性能力会更好，并且圆心也直会在 (rect.width/2, rect.height/2)这一点上。

    var rectWidth = rect.width;
var rectHeight = rect.height;
var width = rectWidth < rectHeight ? rectWidth : rectHeight;

  • 由于我们自己设定了一个 width，那么在设置渐变颜色的参数上就需要注意一下了。

    当 rect.width 不等于 rect.height 的时候。

    如果按照 g.createLinearGradient(0, 0, rect.width, rect.height) 设置渐变色就会出现下面的效果，右下方的蓝色不见了。

    不过如果按照如下代码的方式设置渐变色就会出现下面的效果就会出现预期的效果了。

      var posX = rectWidth / 2;var posY = rectHeight / 2;var linear = rectWidth < rectHeight? g.createLinearGradient(0, posY - width / 2, width, posY + width / 2): g.createLinearGradient(posX - width / 2, 0, posX + width / 2, width);

    原因其实很简单，就是渐变颜色方向的起点和终点并没有随着 width 的改变而改变。

    如图所示以rectWidth > rectHeight 为例

绘制组件

在绘制组件的过程中，我们需要把一些边界条件和特殊情况考虑到，来保持组件的扩展性和稳定性

下面就是一些我的心得

  • 在做了 g 操作的头尾分别使用 save 和 restore ，以此来保障 g 操作的不影响后续的扩展开发。

    g.save()
// g 操作
// ...
// ...
g.restore()

    save/restore

    设想一下，我们正在用 10 像素宽，颜色为红色的笔画图，然后把画笔设置成1像素宽，颜色变成绿色。绿色画完之后呢，我们想接着用10像素的红色来画，如果没有 save 与 restore，那我们就不得不重新设置一遍画笔——如果画笔状态过多，那我们的代码就会大量增加；而且，这些设置过程是重复而乏味的。

    最后保存的最先还原！restore 总是还原离他最近的 save 点（已经还原的不能第2次还原到他）。

    另外 save 和 restore 一般是改变了 transform 或 clip 才需要，大部分情况下不需要，例如你设置了颜色、宽度等等参数，下次要绘制这些的人会自己再设置这些，所以能尽量不用 save/restore 的地方可以尽量不用，那也是有代价的

  • 当进度值为 0 且 线帽样式为圆角的时候进度环会变成一个圆点，正确的做法使需要对进度值为 0 的时候进行特殊处理。

    // 进度环
g.beginPath();
g.arc(posX, posY, circleRadius, proStartAngel, proEndAngel);
g.strokeStyle = linearOuter;
g.lineCap = progressLineCap;
if (progressPercentage !== 0) g.stroke();

  • 由于 Chrome 浏览器的限制（Chrome 显示最小字体为 12 px），所以不能通过 12px这样的数值设定文字大小，只能通过缩放来控制文字的大小了。

    当你高高兴兴的的使用 scale 对文字进行缩放的时候

    var fontScale = 0.75
g.fillStyle = 'white';
g.textAlign = 'center';
g.font = fontSize + 'px Arial';
g.scale(fontScale, fontScale);
g.fillText(progressPercentage + '%', posX, posY + fontSize / 3);

    你会得到这样的结果

    造成这个结果的原因是 scale 操作的参考点位置不对

    下面我们使用矩形的例子详细解释一下

      // 原矩形ctx.save();ctx.beginPath();ctx.strokeRect(0, 0, 400, 400);ctx.restore();// 缩放后的矩形ctx.save();ctx.beginPath();ctx.scale(0.75, 0.75);ctx.strokeRect(0, 0, 400, 400);ctx.restore();

    这时 scale 的参考点是(0,0)所以，中心缩放没有按照我们预期的进行

    当修改参考点的坐标为(50,50)之后，中心缩放就正常了

    那么这个(50,50)是怎么得来的？

    根据上图我们不难看出这个距离其实就是 (缩放前的边长 - 缩放后的边长) / 2得到得

    公式就是 width * (1 - scale) / 2

    在这个例子中套用一下就是 400 * (1 - 0.75) / 2 = 50

      // 原矩形ctx.save();ctx.beginPath();ctx.strokeRect(0, 0, 400, 400);ctx.restore();// 缩放后的矩形ctx.save();ctx.beginPath();ctx.translate(50, 50)ctx.scale(0.75, 0.75);ctx.strokeRect(0, 0, 400, 400);ctx.restore();

    我们把上面得公式在做进一步的扩展，让它的适用性更强

      width * (1 - scale) / 2   -> width / 2 * (1 - scale)  -> posX * (1 - scale)height * (1 - scale) / 2  -> height / 2 * (1 - scale) -> posY * (1 - scale)

    在这里也需要明确一点 posX = x + (width / 2) posY = y + (height / 2)

    在进一步抽象成函数

      function centerScale(ctx, posX, posY, scaleX, scaleY) {ctx.translate(posX * (1 - scaleX), posY * (1 - scaleY));ctx.scale(scaleX, scaleY);}

    那么其中的文字缩放也是如出一辙

      var fontScale = 0.75g.fillStyle = 'white';g.textAlign = 'center';g.font = fontSize + 'px Arial';g.translate(posX * (1 - fontScale), posY * (1 - fontScale));g.scale(fontScale, fontScale);g.fillText(progressPercentage + '%', posX, posY + fontSize / 3);

    当然结果也是很不错的?，文字的缩放功能实现了

    在实现上如果大家有什么问题可以直接留言或者私信或者直接去官网hightopo上查阅相关的资料

结语

这个进度环组件的开发就到此结束了，相信小伙伴们通过我的这篇学习笔记也是可以通过ht.js独立开发一个拓扑组件了。

这篇关于基于 HTML5 Canvas 的拓扑组件开发的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1120645。

相关文章

Android开发环境配置避坑指南

Android开发环境配置避坑指南

《Android开发环境配置避坑指南》本文主要介绍了Android开发环境配置过程中遇到的问题及解决方案,包括VPN注意事项、工具版本统一、Gerrit邮箱配置、Git拉取和提交代码、MergevsR... 目录网络环境：VPN 注意事项工具版本统一：android Studio & JDKGerrit的邮
阅读更多...
Python开发文字版随机事件游戏的项目实例

Python开发文字版随机事件游戏的项目实例

《Python开发文字版随机事件游戏的项目实例》随机事件游戏是一种通过生成不可预测的事件来增强游戏体验的类型,在这篇博文中,我们将使用Python开发一款文字版随机事件游戏,通过这个项目,读者不仅能够... 目录项目概述2.1 游戏概念2.2 游戏特色2.3 目标玩家群体技术选择与环境准备3.1 开发环境3
阅读更多...
Go语言开发实现查询IP信息的MCP服务器

Go语言开发实现查询IP信息的MCP服务器

《Go语言开发实现查询IP信息的MCP服务器》随着MCP的快速普及和广泛应用,MCP服务器也层出不穷,本文将详细介绍如何在Go语言中使用go-mcp库来开发一个查询IP信息的MCP... 目录前言mcp-ip-geo 服务器目录结构说明查询 IP 信息功能实现工具实现工具管理查询单个 IP 信息工具的实现服
阅读更多...
HTML5中的Microdata与历史记录管理详解

HTML5中的Microdata与历史记录管理详解

《HTML5中的Microdata与历史记录管理详解》Microdata作为HTML5新增的一个特性，它允许开发者在HTML文档中添加更多的语义信息，以便于搜索引擎和浏览器更好地理解页面内容，本文将探... 目录html5中的Mijscrodata与历史记录管理背景简介html5中的Microdata使用M
阅读更多...
html5的响应式布局的方法示例详解

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》：本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法，简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局，详细内容请阅读本文，希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的
阅读更多...
HTML5表格语法格式详解

HTML5表格语法格式详解

《HTML5表格语法格式详解》在HTML语法中，表格主要通过table、tr和td3个标签构成,本文通过实例代码讲解HTML5表格语法格式，感兴趣的朋友一起看看吧... 目录一、表格1.表格语法格式2.表格属性 3.例子二、不规则表格1.跨行2.跨列3.例子一、表格在html语法中，表格主要通过< tab
阅读更多...
Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》：本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例，但是返回n
阅读更多...
JS+HTML实现在线图片水印添加工具

JS+HTML实现在线图片水印添加工具

《JS+HTML实现在线图片水印添加工具》在社交媒体和内容创作日益频繁的今天,如何保护原创内容、展示品牌身份成了一个不得不面对的问题,本文将实现一个完全基于HTML+CSS构建的现代化图片水印在线工具... 目录概述功能亮点使用方法技术解析延伸思考运行效果项目源码下载总结概述在社交媒体和内容创作日益频繁的
阅读更多...
前端CSS Grid 布局示例详解

前端CSS Grid 布局示例详解

《前端CSSGrid布局示例详解》CSSGrid是一种二维布局系统，可以同时控制行和列，相比Flex（一维布局），更适合用在整体页面布局或复杂模块结构中,：本文主要介绍前端CSSGri... 目录css Grid 布局详解（通俗易懂版）一、概述二、基础概念三、创建 Grid 容器四、定义网格行和列五、设置行
阅读更多...
使用Python开发一个带EPUB转换功能的Markdown编辑器

使用Python开发一个带EPUB转换功能的Markdown编辑器

《使用Python开发一个带EPUB转换功能的Markdown编辑器》Markdown因其简单易用和强大的格式支持,成为了写作者、开发者及内容创作者的首选格式,本文将通过Python开发一个Markd... 目录应用概览代码结构与核心组件1. 初始化与布局 (__init__)2. 工具栏 (setup_t
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2