ht.Default.setImage()注册图片（矢量图标）以及使用；渲染元素对象设定矢量图标，数据绑定动态赋值

最新推荐文章于 2022-09-29 16:53:09 发布
原创 最新推荐文章于 2022-09-29 16:53:09 发布 · 467 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#ht.js #ht for web #canvas #webgl #组态编辑

本文介绍了一种在HT框架中使用矢量图的方式，并详细解释了如何通过三种不同的方法来设置图片，以及如何利用数据绑定来动态更新矢量图的内容。

https://github.com/yancy-li/carousel/blob/master/src/core.js

不少场合需要传入图片，可以是png或者是矢量图，比如下：

JavaScript
//1）注册图片
//设置方式一：图片文件路径
ht.Default.setImage('mac', 'res/mac.png');
//设置方式二：HT矢量图标文件路径
ht.Default.setImage('mac', 'symbols/admin/icons/search.json');
//设置方式三：HT矢量图标内容（不需要手写，编辑器设计图标，生成的对应json内容就是）
ht.Default.setImage('mac',{
    "width": 20,
    "height": 40,
    "comps": [{
    "type": "rect",
    "background": "rgba(0,0,0,0.40)",
    "rect": [
        0,
        0,
        20,
        40
    ]
    },
    { <
最低0.47元/天 解锁文章
HT for Web学习笔记（2） 矢量图形
SKernelChapman的博客
07-11 861
相比较直接用图片，矢量图不会在视角放大时出现失真、模糊、锯齿等问题。可用于GraphView组件上的图元图片，TreeView、TableView上的图标，甚至整个HT框架。 整体属性 矢量用JSON格式描述，通过ht.Default.setImage('name', jsonObject)进行注册,之后通过node.setImage('hightopo')和node.setIcon('hightopo')调用。 矢量JSON描述必须包含width、height和comps参数信息，以及以下这些可选参
HT for Web基于HTML5的图像操作（一）
weixin_34234823的博客
11-22 481
为什么80%的码农都做不了架构师？>>> ...
全局初始注册图片图标十分有意义且有必要，如ht.Default.setImage(aa,‘xxx.json‘)，特别是注册有数据绑定变量暴露的symbol图标（包括渲染元素），在代码使用node.se
IOTOS的博客
09-29 442
全局初始注册图片图标十分有意义且有必要，如ht.Default.setImage(aa,'xxx.json')，特别是注册有数据绑定变量暴露的symbol图标（包括渲染元素），在代码使用node.setImage设置拓扑图元的图片时，可以成为同步函数！
Jcrop调用setImage设定（或改变）图像方法，支持自定义图片大小
yijian1992的专栏
05-20 951
Jcrop 是一个功能强大的 jQuery 图像裁剪插件，结合后端程序（例如：PHP）可以快速的实现图片裁剪的功能。 在API中有一个方法可以设置或改变图片： //设定（或改变）图像。例：jcropApi.setImage('newpic.jpg') setImage(string, callback) 但遗憾的是此方法并不支持设置图片的宽高，网上找了一大圈没有找到合适的方法，于是看了下源码，做了修改后可以支持自定义图片宽高。 要修改地方是jquery.Jcrop.js代码中setImage方法，
3D 手册 -HT for Web----新手学习-ht.Default
li123456ch的博客
01-17 1442
ht.Default ht.Default定义了所有组件的默认参数值，命名规范以组件名+属性名的结合方式，例如树组件TreeView的行线是否显示属性rowLineVisible，该属性的默认值定义在ht.Default.treeViewRowLineVisible上，因此可通过treeView.setRowLineVisible(true)改变具体组件实例，也可通过配置ht.Defaul...
OpenLayers、geojson矢量图
Felix南南
06-18 716
OpenLayers的官网，下面简称ol。 官方的描述：OpenLayers可以轻松地在任何网页中放置动态地图。它可以显示从任何来源加载的地图图块，矢量数据和标记。开发OpenLayers是为了进一步使用各种地理信息。它是完全免费的开源JavaScript，根据2条款BSD许可证（也称为FreeBSD）发布。 官网的有关于矢量图的例子，大概长这样子： 官方例子代码部分： <!DOCTYPE html> <html> <head> <title>
if (data.icon.endsWith('.svg')) { fetch(data.icon) .then(response => response.text()) .then(svgContent => { console.log(data,'data') // 注册 SVG 为图片资源 // ht.Default.setImage(data.code, svgContent); console.log('准备注册 SVG 图片，键名:', data.code); ht.Default.setImage(data.code, svgContent); console.log('SVG 图片注册完成，键名:', data.code); // 设置节点图片 node.setImage(data.code); g2d.fitContent(); g2d.invalidate(); }) .catch(error => { console.error('加载 SVG 图片失败:', error); }); } else { // 非 SVG 图片直接设置 node.setImage(data.icon); }svg图片在页面不显示
08-20
在你的代码中，你尝试从一个 URL 加载 `.svg` 文件并使用 `ht.Default.setImage()` 方法将其注册为图像资源，然后设置到某个节点上。但最终 SVG 图片没有显示出来。我们来分析一下可能的原因以及解决方案。 --- ##...
ht for web 中new ht.edge()线上添加图标和拐点，并且图标上可以动态写入接口返回的数字（例如setStyleIcon）
最新发布
11-29
- 或者使用预加载的矢量图标名称（通过`ht.Default.setImage`注册） 六、完整示例代码： ```javascript // 创建数据模型和视图 const dataModel = new ht.DataModel(); const graphView = new ht.graph....
ht.Default.setBase64Image is not a function
08-20
Hightopo 支持将 `Image` 对象注册为图像资源，你可以通过 `new Image()` 动态加载 SVG，然后通过 `ht.Default.setImage()` 注册。 ### ✅ 示例代码（适用于大多数 HT 版本） ```js if (data.icon.endsWith('.svg'...
jquery.Jcrop.js（setImage方法支持自定义图片尺寸）
05-20
此文件是Jcrop.js的修改版，主要增加了setImage方法入参，可以传入图片宽高自定义图片大小，调用方式：jcrop_api.setImage('图片URL',480,270);
setImage和setBackgroundImage区别
L色J忆的专栏
04-14 994
用setBackgoundImage时,不管按钮是system还是custom,图片和标题都正常显示 用setImage时,按钮是system时,图片正常显示,标题不显示 用setImage时,按钮是custom时,图片标题都不显示
html5设置图片大小_HT for Web基于HTML5的图像操作（二）
weixin_42576467的博客
12-22 568
上篇介绍了HT for Web采用HTML5 Canvas的getImageData和setImageData函数，通过颜色乘积实现的染色效果，本文将再次介绍另一种更为高效的实现方式，当然要实现的功能效果是完全一样的。这次我们依然基于HTML5技术，但采用Canvas的globalCompositeOperation属性进行各种blending效果：我们采用“multiply”和“destinat...
setImage和setBackGround的方法的区别？
mmdev
04-25 339
ImageView： setImageResource(R.drawable.number);、 setImageBitmap(b); setBackgroundResource(R.drawable.number); setBackgroundDrawable(); 区别？
UIButton setImage setTitle上同时显示图片和文字的方法(最有效）
NightWish
03-06 7203
btn = [UIButtonbuttonWithType:UIButtonTypeCustom]; btn.showsTouchWhenHighlighted =YES; btn.tag = i; btn.frame =CGRectMake(width * i, 0, width, frame.size.height);            NSString *title = [
关于 STM_SETIMAGE 的使用 有一个注意事项
whitehack的专栏
05-24 4895
<br /> HBITMAP holdmap=(HBITMAP)SendMessage(picwnd,STM_SETIMAGE,IMAGE_BITMAP,(LPARAM)hmap); if (holdmap!=NULL) { DeleteObject(holdmap); } DeleteObject(hmap) <br /> <br />在做一个项目 因为要不停的   STM_SETIMAGE 设置新的位图 <br />但是发现一个问题设置一个为图就增长一次内存  很明显.有地方内存泄
图片自适应大小显示
jj2320711457的博客
06-25 2103
a场景: div 包着 img img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
图标、图片、矢量图注册，通过名称来配置icon可以提高性能
IOTOS的博客
09-29 544
图标、图片、矢量图注册，通过名称来配置icon可以提高性能
代码操作组态界面图元对象；组态展示代码创建的对象；ht示例代码图元对象视图与组态图纸界面融合；代码对象以html dom元素添加到组态以及CSS控制；以ht.Grid为例派生类用渲染元素暴露属性可配置
IOTOS的博客
09-28 548
首先要解决的问题就是ht.Grid类型如何能作为图标拖放到组态图纸上，因为目前拖放的绝大部分都是ht.Node类型，即时设置了tag，让代码获取到其对象实例，也没法代替代码中的new ht.Grid()，所以首先要解决组态工具条中扩展ht.Grid类型的内置组件图标。如下图所示，要实现内置图标，并且是指定的ht.Grid类型，用于拖放一个或多个图标进来，结合不同的tag标签，实现在代码中需要多个new ht.Grid对象的地方，都可以通过dm.getDataByTag()用组态可视化拖拽生成的实例。
java seticonimage_set Icon、set IconImage与set Image的区别
weixin_27808545的博客
02-16 2346
一、Icon:Icon位于javax.swing包中，它是一个接口 public interface Icon，介绍为：一个小的固定大小的图片，通常用于装饰组件有三个方法：int getIconHeight();int getIconWidth();void paintIcon(Component c,Graphics g,int x,int y);Icon木有用过，提到它是因为ImageIcon...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IOTOS

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值