基于 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。

相关文章

基于Python开发电脑定时关机工具

基于Python开发电脑定时关机工具

《基于Python开发电脑定时关机工具》这篇文章主要为大家详细介绍了如何基于Python开发一个电脑定时关机工具,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1. 简介2. 运行效果3. 相关源码1. 简介这个程序就像一个“忠实的管家”，帮你按时关掉电脑，而且全程不需要你多做
阅读更多...
Java中的Opencv简介与开发环境部署方法

Java中的Opencv简介与开发环境部署方法

《Java中的Opencv简介与开发环境部署方法》OpenCV是一个开源的计算机视觉和图像处理库,提供了丰富的图像处理算法和工具,它支持多种图像处理和计算机视觉算法,可以用于物体识别与跟踪、图像分割与... 目录1.Opencv简介Opencv的应用2.Java使用OpenCV进行图像操作opencv安装j
阅读更多...
vue解决子组件样式覆盖问题scoped deep

vue解决子组件样式覆盖问题scoped deep

《vue解决子组件样式覆盖问题scopeddeep》文章主要介绍了在Vue项目中处理全局样式和局部样式的方法,包括使用scoped属性和深度选择器（/deep/）来覆盖子组件的样式,作者建议所有组件... 目录前言scoped分析deep分析使用总结所有组件必须加scoped父组件覆盖子组件使用deep前言
阅读更多...
VUE动态绑定class类的三种常用方式及适用场景详解

VUE动态绑定class类的三种常用方式及适用场景详解

《VUE动态绑定class类的三种常用方式及适用场景详解》文章介绍了在实际开发中动态绑定class的三种常见情况及其解决方案,包括根据不同的返回值渲染不同的class样式、给模块添加基础样式以及根据设... 目录前言1.动态选择class样式（对象添加：情景一）2.动态添加一个class样式（字符串添加：情
阅读更多...
基于Qt Qml实现时间轴组件

基于Qt Qml实现时间轴组件

《基于QtQml实现时间轴组件》时间轴组件是现代用户界面中常见的元素,用于按时间顺序展示事件,本文主要为大家详细介绍了如何使用Qml实现一个简单的时间轴组件,需要的可以参考下... 目录写在前面效果图组件概述实现细节1. 组件结构2. 属性定义3. 数据模型4. 事件项的添加和排序5. 事件项的渲染如何使用
阅读更多...
基于Qt开发一个简单的OFD阅读器

基于Qt开发一个简单的OFD阅读器

《基于Qt开发一个简单的OFD阅读器》这篇文章主要为大家详细介绍了如何使用Qt框架开发一个功能强大且性能优异的OFD阅读器,文中的示例代码讲解详细,有需要的小伙伴可以参考一下... 目录摘要引言一、OFD文件格式解析二、文档结构解析三、页面渲染四、用户交互五、性能优化六、示例代码七、未来发展方向八、结论摘要
阅读更多...
React实现原生APP切换效果

React实现原生APP切换效果

《React实现原生APP切换效果》最近需要使用Hybrid的方式开发一个APP,交互和原生APP相似并且需要IM通信,本文给大家介绍了使用React实现原生APP切换效果,文中通过代码示例讲解的非常... 目录背景需求概览技术栈实现步骤根据 react-router-dom 文档配置好路由添加过渡动画使用
阅读更多...
在 VSCode 中配置 C++ 开发环境的详细教程

在 VSCode 中配置 C++ 开发环境的详细教程

《在VSCode中配置C++开发环境的详细教程》本文详细介绍了如何在VisualStudioCode（VSCode）中配置C++开发环境,包括安装必要的工具、配置编译器、设置调试环境等步骤,通... 目录如何在 VSCode 中配置 C++ 开发环境：详细教程1. 什么是 VSCode？2. 安装 VSCo
阅读更多...
使用Vue.js报错：ReferenceError: “Vue is not defined“ 的原因与解决方案

使用Vue.js报错：ReferenceError: “Vue is not defined“ 的原因与解决方案

《使用Vue.js报错：ReferenceError:“Vueisnotdefined“的原因与解决方案》在前端开发中,ReferenceError:Vueisnotdefined是一个常见... 目录一、错误描述二、错误成因分析三、解决方案1. 检查 vue.js 的引入方式2. 验证 npm 安装3.
阅读更多...
vue如何监听对象或者数组某个属性的变化详解

vue如何监听对象或者数组某个属性的变化详解

《vue如何监听对象或者数组某个属性的变化详解》这篇文章主要给大家介绍了关于vue如何监听对象或者数组某个属性的变化,在Vue.js中可以通过watch监听属性变化并动态修改其他属性的值,watch通... 目录前言用watch监听深度监听使用计算属性watch和计算属性的区别在vue 3中使用watchE
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2