[代码分享] 使用 HTML5 的 Canvas 绘制编码说明图片

查看 31|回复 2
作者:huhailong1121   
最急在工作中遇到一个需求,根据给定的编码生成编码说明,像下面这样的效果。

{{{width="auto" height="auto"}}}
不同含义的编码用横杠分割,然后每个编码下面用箭头指明具体的含义。下面是我使用 canvas 实现的代码。具体的编码宽度大家可以根据实际情况进行调整,目前我的这个方法中支持起始坐标设定,和箭头的长度设定。
预览地址:https://www.huhailong.vip/res/html/codedescribe
/**
* 绘制编码说明图片
* @param {起始横坐标} startX
* @param {起始纵坐标} startY
* @param {编码信息对象} codeDescribeObj
*/
function drawCode(startX, startY, codeDescribeObj) {
    const canvas = document.getElementById('code-canvas');
    const ctx = canvas.getContext('2d');
    let preTextWidth = startX;  //左侧开始坐标
    let preTextHeight = startY; //开始高度坐标
    for(let i=0; i
对应的 html 文件和 css 文件如下
   
   
    编码说明图片绘制
   

   
        
   
   

body{
    margin: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.box{
    text-align: center;
    width: 800px;
}
canvas{
    border: 1px solid gray;
    border-radius: 4px;
    width: 100%;
}
因为没有找到符合的组件,所以自己写了,如果有知道有现成组件的小伙伴也可以分享一下。
codehz   
是不是直接用 svg 比较方便()
huhailong1121
OP
  
@codehz 因为我比较熟悉 canvas ,所以就使用 canvas 了,这个绘制不难,主要是这个编码是从服务端传来的,可能是 2 个或者 5 个,个数和文字宽度不确定,所以需要动态的去绘制。如果 svg 也可以动态绘制,理论上是可以的。
您需要登录后才可以回帖 登录 | 立即注册

返回顶部