图标、图片、矢量图注册，通过名称来配置icon可以提高性能

入门手册 - HT for Webhttps://www.hightopo.com/guide/guide/core/beginners/ht-beginners-guide.html

图片是图形组件的重要资源，树上的图标，拓扑上图元等都可用图片来绘制，HT支持PNG和JPG等常规图片格式，
如Node章节的示例所示，图片有两种使用方式：

• 直接将图片相对或绝对路径，设置到数据模型的相应属性上，air13.setImage(res/mac-air.png)

• 先通过ht.Default.setImage('mac', 'res/mac-air.png')进行注册，再将注册名称设置到模型上air11.setImage('mac')

直接设置路径方式开发方便，无需提前注册图片，但数据模型序列化时图片路径占用内存较多，将来图片路径变化后不利于管理维护，两种方式都是正确的使用方式，可根据项目情况选中不同方式或混合使用。

如果采用url的路径方式HT内部会自动加载图片，并在onload之后自动更新相应的视图组件。

HT的框架下图片被赋予了更广泛的含义，HT提供了自定义JSON格式的矢量描述形式，以HT标准定义的JSON矢量格式，也可以作为图片进行注册和使用，HT的矢量方式比传统图片格式更节省空间，缩放不失真，最强大之处在于矢量的所有图形参数，皆可与Data模型上的数据动态绑定，具体说明参见矢量手册。

ht.Default.setImage函数有以下几种调用方式：

• setImage('hightopo', 'www.hightopo.com/logo.png')通过url方式注册

• setImage('hightopo', 'data:image/png;base64,iVBORw...Jggg==')通过base64方式注册

• setImage('www.hightopo.com/logo.png')只用url一个参数，该方式图片的name和url路径一样（？？？，实际测试发现没效果，还是得传入名称？）

• setImage('hightopo', 200, 80, 'www.hightopo.com/logo.png')通过url方式注册，指定图片宽高

• setImage('hightopo', 200, 80, 'data:image/png;base64,iVBORw...Jggg==')通过base64方式注册，指定图片宽高

• setImage('hightopo', img|canvas)直接注册img和canvas可绘制html元素方式

采用直接注册img的html元素的方式，用户需确保img资源已加载，这种方式下HT不会监听其onload事件，因此不会自动通知视图组件更新。

ht.Default.getImage(name, color)可获取对应的图片元素，在图片加载过程该函数返回空，只有onload之后才能得到相应图元元素，color为颜色参数，一般为空，如果有颜色值则HT内部会构建出对图片进行color染色后的新图片

HT还提供了以下几种针对图片的绘制函数，以下参数中image为可绘制的img或canvas元素，也可为矢量的json格式，

由于矢量可动态绑定数据模型具有染色功能，因此绘制矢量时可传入data数据、view组件和color染色参数：

• ht.Default.drawImage(g, image, x, y, width, height, data, view, color)将图片image以填充满的方式绘制在指定矩形区域内

• ht.Default.drawCenterImage(g, image, x, y, data, view, color)以x和y为中心位置绘制image图片

• ht.Default.drawStretchImage(g, image, stretch, x, y, w, h, data, view, color)在矩形位置内绘制图片，stretch类型如下：

• fill图片填充满整个矩形区域，如果图片宽高比例和矩形不一致会导致图片拉伸失真。

• uniform图片始终保持原始宽高比例不变化，并尽量填充满矩形区域。

• centerUniform当矩形区域大于图片尺寸时图片以原始大小绘制在中心位置，空间不够时采用uniform的绘制方式。

最后

以上就是长情故事为你收集整理的图标、图片、矢量图注册，通过名称来配置icon可以提高性能的全部内容，希望文章能够帮你解决图标、图片、矢量图注册，通过名称来配置icon可以提高性能所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。