HT for Web (Hightopo) 使用心得（2）- 2D 图纸、节点、连线 与基本动画
概括来说，用 ht for web 做可视化主要分为两部分，也就是 2d 和 3d。这两部分需要单独创建。在它们被创建完成后，我们再把它们集成到一起。
ht for web 的 2d 部分主要是指 ht.graph.graphview (简称 graphview，也就是 2d 图纸)。所谓 2d 图纸其本质是一个 canvas。我们可以在上面进行基本图形的绘制和编辑，进行连线布局，或者渲染动画。graphview 可以脱离开 3d 单独使用，比如用于创建普通网页，组态软件，组织图，流程图等。
本节我们主要以一个示例说明一下 2d 图纸的基本概念、功能及用法。其主要包括以下几部分：
创建2d 图纸 -（graphview）
添加节点 -（ht.node）
坐标系与坐标转换
添加连线 - （ht.edge）
动画 - ht.default.startanim()
创建2d 图纸 -（graphview）
创建2d 图纸 -（graphview）
通过 new ht.graph.graphview() 便可创建一张图纸。创建完图纸后，对于 ht 视图组件，可以通过 graphview.addtodom() 方法将其添加到 dom 中。addtodom() 方法本身接收一个参数。如果为空，则默认添加到 body 下面。也可以通过传递一个 div 将 2d 图纸固定到页面的某个位置。
对于新创建的图纸，其默认具有缩放、平移、编辑，以及框选等属性。我们可以根据需要对其进行启用或禁用。
与其他视图组件一样，如果不指定 datamodel, graphview 自身也会创建一个空的 datamodel 容器用来管理所有添加到其里面的各种图元。通过 graphview.getdatamodel() 或 graphview.dm() 可以获取该容器。对于 graphview，它支持通过 datamodel.setbackground() 来配置图纸的背景颜色。
/*************** 创建一张 2d 图纸，添加到 body 下，并配置各种属性 ******************/
const gv = new ht.graph.graphview();
gv.addtodom();
gv.setzoomable(true); // 可缩放，默认：true
gv.setpannable(true); // 可平移，默认：true
gv.seteditable(true); // 图纸上的 node 是否可编辑，默认：true
gv.setrectselectable(true); // 是否允许对 node 进行框选，默认：true
const dm = gv.getdatamodel(); // 获取图纸的 datamodel，简写形式：gv.dm()
dm.setbackground('#dadada'); // 同 dm.setbackground('rgba(218, 218, 218, 1)');
为什么要通过 datamodel 来设置图纸的背景而不是直接操作 graphview 本身？
在第一节我们提到过，为了能将我们创建的 2d/3d 数据保存与恢复，可以通过对 datamodel 进行序列化与反序列化来实现。注意，这里的序列化操作针对的是 datamodel 而不是视图组件。因此，像如 graphview 这种视图组件，其背景颜色这种显示属性需要通过配置到 datamodel 才能保存下来。而像缩放，平移等操作属性，则需要根据项目运行需要单独配置。
添加节点 -（ht.node）
有了 2d 图纸的 datamodel，我们便可以向其添加节点或者叫图元。这里我们添加了两个机柜图标。
/**************** 分别创建两个 ht 节点并添加到图纸中 ************************/
const server1 = new ht.node();
server1.setsize(40, 100); // 节点宽高。应当根据图片比例设置，不然会出现拉伸效果
server1.setposition(100, 100); // 节点位置。左上角为（0，0）坐标
server1.setimage('assets/server.png'); // 节点图片
server1.setname('server 1'); // 显示名称
dm.add(server1); // 添加到 datamodel中，也就是添加到图纸中
const server2 = new ht.node();
server2.setsize(40, 100);
server2.setposition(250, 100);
server2.setimage('assets/server.png');
server2.setname('server 2');
dm.add(server2); // 注意一定要添加到 datamodel 中
在传统前端（vue, react, html）的开发过程中，要添加一个节点，我们往往需要先手动创建该节点（如添加一个 icon）并添加到 html 下面。然后通过数据绑定对该节点进行操作。而在 ht 中，我们只需要将新增的节点添加到 datamodel 下面。ht 的视图组件会监听 datamodel 的变化，自动触发重新渲染操作。我们对节点的所有样式风格配置和操作都可以直接在节点上进行。
节点配置
ht.node（简称为 node）是 2d 图纸和 3d 场景呈现节点图元的基础类，它继承自 ht.data。在 ht.data 的基础上，其又新增了位置，大小，旋转，缩放，吸附等属性。这些属性都可以通过 set*/get* 来设置和获取。
在 graphview 中，新增一个 ht.node 节点，默认其会显示一个电脑图片。我们可以通过 setimage(image) 方法来更改。如在上例的代码中，我们找了一个机柜照片并将它给了新增的节点。
由于机柜图片可能很大，我们可以通过 setsize(width, height) 来对节点大小进行控制。通过配置不同的宽高还可以实现拉伸效果。如果不想要拉伸效果，则可以根据原始图片宽高比来设置节点的大小。
坐标系与坐标转换
添加的节点如果不指定位置，其默认会被放到（x: 0, y: 0）点。通过 node.setposition(x, y) 或 node.p(x, y) 可以控制节点的位置。通过 node.getposition() 或 node.p() 可以获取其坐标。在 graphview 中，如果不手动修改节点的坐标，其在 graphview 中的位置便是固定不变的。
由于 graphview 本身具有缩放、平移等属性，因此其里面的节点显示在浏览器上的位置是不固定的。因此我们可以知道 graphview 的坐标系与浏览器的坐标系是不一样的。
实际上，graphview 采用的是一个相对坐标系，其方向与 canvas 一致，即左上角为（0, 0）点。往右为 x 轴的正方向，往下为 y 轴的正方向。通过以下两个方法可以在 graphview 坐标与浏览器坐标之间进行转换。
graphview.getlogicalpoint(event): 传入 html 事件对象，将浏览器坐标转换为 graphview 中的逻辑坐标
graphview.getscreenpoint(point, y): 传入 graphview 中的坐标，转换为浏览器坐标
添加连线 - （ht.edge）
在添加了两个机柜图标之后，我们现在用连线将他们连接起来。ht 中的连线是用 ht.edge 实现的。
ht.edge 类型（简称 edge）用于连接起始和目标两个 node 节点，两个节点间可以有多条 edge 存在，也允许起始和目标为同一节点。 可通过 new ht.edge(source, target) 直接在构造函数中传入 source 和 target 节点对象，也可构建 edge 对象之后再分别设置。
getsource() 和 setscource(node) 获取和设置起始节点
gettarget() 和 settarget(node) 获取和设置目标节点
islooped() 判断连线的起始和目标是否为同一节点
/****************************** 创建连线 *************************************/
const edges = [];
// 创建三条连线连接 server1 和 server2
edges.push(createedge(4, 'green', 6, 'yellow', [20, 10]));
edges.push(createedge(3, '#fff', 3, '#000', [10, 10])); // 黑白线
edges.push(createedge(10, 'rgb(51,153,255)', 5, 'rgb(242,83,75)', [5, 10])); // 红蓝线
function createedge(width, color, dashwidth, dashcolor, pattern) {
const edge = new ht.edge(server1, server2);
edge.s({
'edge.width': width, // 连线宽度
'edge.gap': 30, // 连线与连线的距离
'edge.color': color, // 连线颜色。也可使用 rgb 或16进制颜色
'edge.dash': true, // 是否使用虚线
'edge.dash.width': dashwidth, // 虚线宽度
'edge.dash.color': dashcolor, // 虚线颜色
'edge.dash.pattern': pattern, // 虚线与连线的占比。[虚线, 连线]
'edge.offset': 0, // 偏移
});
dm.add(edge); // 注意一定要添加到 datamodel 中
return edge;
}
// 创建第四条连线用于 server1 自连线
const edge = new ht.edge();
edge.setsource(server1);
edge.settarget(server1);
edge.s({
'edge.width': 5, // 连线宽度
'edge.gap': 30, // 连线与连线的距离
'edge.color': 'pink', // 连线颜色。也可使用 rgb 或16进制颜色
'edge.dash': true, // 是否使用虚线
'edge.dash.width': 5, // 虚线宽度
'edge.dash.color': 'purple', // 虚线颜色
'edge.dash.pattern': [10, 10], // 虚线与连线的占比。[虚线, 连线]
'edge.offset': 0, // 偏移
});
dm.add(edge); // 注意一定要添加到 datamodel 中
edges.push(edge);
上面的代码创建了4条 edge，其中前三条分别是连接 server1 和 server2，第四条是 server1 自连接。ht.edge 的属性主要是由 edge.s() 方法来配置，该方法是 edge.setstyle() 的简写形式。edge.s() 主要用来配置节点内置的属性。ht for web 引擎会根据属性键值来渲染不同的效果。如果想要设置自定义属性，需要使用 edge.a() 来实现。
与 ht.node 相同的是，ht.edge 也是由 ht.data 扩展而来。但在大部分情况下，其又有自己的特点：
需要设置起始节点和目标节点。二者可以为同一个节点（如上例最后一条 edge）。
缺少起始或目标节点的 edge 不会在图纸上显示。
edge 会跟随节点移动。也就是说当我们拖动起始节点和目标节点的时候，其所相关的 edge 会跟随移动。
由于 edge 的位置由两个端点决定，因此 edge 不支持 getposition()/setposition() 方法。同样的，其宽度是在 edge.s() 中配置的，因此 edge 也不支持 getsize()/setsize() 方法。
除了上面示例中的配置，ht.edge 还支持自定义连线类型。如果嫌麻烦，也可以使用 ht 内置的十几种连线类型，如 edge.s(’edge.type’, ‘boundary’) 就代表连线仅连接到图元矩形边缘。如果要使用内置连线类型，需要引入连线类型插件：
在创建了连线后，如何让它们流动起来呢？这里就用到了动画功能。
动画 - ht.default.startanim()
要实现动画功能，不外乎有这样几个关键属性：动画播放时长，播放过程中的属性变化，播放完的回调事件。
ht 支持多种方式来实现动画。这里我们选择一种比较常用的。先来看代码：
/****************************** 连线动画 *************************************/
const animparams = {
// frames: 12, // 动画帧数
// interval: 10, // 动画帧间隔毫秒数
duration: 2000, // 动画播放时长
easing: function(t){ return t * t; }, // 动画缓动函数，默认采用`ht.default.animeasing`
finishfunc: function(){
ht.default.startanim(animparams);
}, // 动画结束后调用的函数。
action: function(v, t){ // action函数必须提供，实现动画过程中的属性变化。v代表通过easing(t)函数运算后的值，t代表当前动画进行的进度，范围：[0~1]
edges.foreach((edge, index) => {
const direction = index%2 == 0 ? 1 : -1;
edge.s('edge.dash.offset', t * 20 * direction);
});
}
};
ht.default.startanim(animparams);
这里 ht 用于播放动画的方法是 ht.default.startanim(animparams)，该方法会返回一个 anim 对象，可调用anim.stop(true) 终止动画。同时 anim 还具有 anim.pause() 和 anim.resume() 方法可用来中断和继续动画功能， 以及 anim.isrunning() 函数判断动画是否正在进行。
该方法所使用的参数也很简单：
duration: 动画播放时长。如果想精确地控制动画播放帧数及帧间隔，我们也可以用 frames + interval 的形式来控制动画播放。
easing: 缓动函数。使用数学公式来控制动画播放的速度与快慢。可参考
finishfunc: 播放完回调。在动画结束后，该方法会被执行。
action: 动作控制。节点的哪些属性需要变化都是在这里定义。如控制节点的位置，旋转，大小等。在动画执行过程中的每一帧都会调用一次该方法。其中的两个参数分别是：
t: 代表当前动画进行的进度。其范围是从开始执行0到执行结束1。该值的变化随着时间前进，是相对均匀的。如果我们想要动画匀速执行，这里可以用 t 来实现。
v: 代表通过 easing(t) 函数运算后的值。其范围在大部分情况下也是从0到1。但是这里的 v 值在变化上由 easing(t) 函数决定，不一定是均匀的。对于有的缓动效果，如 easeoutback () ，其 v 值在中间阶段就可能大于1。如果想要在动画中使用缓动效果，这里就需要使用 v 参数来控制属性变化。
小结
本节我们主要介绍了 ht for web 图纸的创建与基本配置。在 graphview 中，我们可以向其 datamodel 添加 ht.node 来绘制机柜。通过 node.setposition(x, y) 或 node.p(x, y) 方法可以控制节点的位置，并通过 node.getposition() 或 node.p() 方法来获取其坐标。同时，graphview 中的坐标系与浏览器坐标系不同，我们可以使用 graphview.getlogicalpoint(event) 和 graphview.getscreenpoint(point, y) 方法在两种坐标系之间进行转换。
对于连线，我们使用 ht.edge 类型表示。创建 ht.edge 对象时需要传入起始节点和目标节点，同时可以通过 edge.s() 方法配置其属性，如宽度、颜色、虚线等。在创建多条连线后，我们可以使用 ht.default.startanim(animparams) 方法来实现连线动画，其中 animparams 是一个对象，包含动画播放时长、缓动函数、动画结束回调函数和动作控制函数等参数。
苏州耐斯达总部暨研发生产基地开工
ZigBee无线网络协议层
基于DS28S60的双向身份验证示例，使用Jupyter笔记本
电缆受潮的原因是什么，它所造成的危害有哪些
浅谈MCM GPU的概念
HT for Web (Hightopo) 使用心得（2）- 2D 图纸、节点、连线 与基本动画
2023 年初至今 DigiKey 新增 175,000 多个新 SKU
Maxim推出带失效保护的PROFIBUS-DP/RS-48
外热成像测温系统应对疫情好助力
中国电子旗下华大半导体、中电锦江召开干部大会
智能茶盘的设计有效保证了使用的安全性和简便性
LinK：用线性核实现3D激光雷达感知任务中的large kernel
人机界面是什么意思
电动机的大修内容及周期是怎样规定的？
预计2019年智能音箱价值70亿美元 成为历史上价值增长最快的互联设备
中国移动威风不再,中国移动出现不利局面受多种因素所影响
可溶性聚四氟乙烯和聚四氟乙烯的区别
永磁同步电机的调试方法及详细步骤
浅谈集成运算放大器的主要应用
传iPad 3将采用视网膜显示技术
ht for web 的 2d 部分主要是指 ht.graph.graphview (简称 graphview，也就是 2d 图纸)。所谓 2d 图纸其本质是一个 canvas。我们可以在上面进行基本图形的绘制和编辑，进行连线布局，或者渲染动画。graphview 可以脱离开 3d 单独使用，比如用于创建普通网页，组态软件，组织图，流程图等。
本节我们主要以一个示例说明一下 2d 图纸的基本概念、功能及用法。其主要包括以下几部分：
创建2d 图纸 -（graphview）
添加节点 -（ht.node）
坐标系与坐标转换
添加连线 - （ht.edge）
动画 - ht.default.startanim()
创建2d 图纸 -（graphview）
创建2d 图纸 -（graphview）
通过 new ht.graph.graphview() 便可创建一张图纸。创建完图纸后，对于 ht 视图组件，可以通过 graphview.addtodom() 方法将其添加到 dom 中。addtodom() 方法本身接收一个参数。如果为空，则默认添加到 body 下面。也可以通过传递一个 div 将 2d 图纸固定到页面的某个位置。
对于新创建的图纸，其默认具有缩放、平移、编辑，以及框选等属性。我们可以根据需要对其进行启用或禁用。
与其他视图组件一样，如果不指定 datamodel, graphview 自身也会创建一个空的 datamodel 容器用来管理所有添加到其里面的各种图元。通过 graphview.getdatamodel() 或 graphview.dm() 可以获取该容器。对于 graphview，它支持通过 datamodel.setbackground() 来配置图纸的背景颜色。
/*************** 创建一张 2d 图纸，添加到 body 下，并配置各种属性 ******************/
const gv = new ht.graph.graphview();
gv.addtodom();
gv.setzoomable(true); // 可缩放，默认：true
gv.setpannable(true); // 可平移，默认：true
gv.seteditable(true); // 图纸上的 node 是否可编辑，默认：true
gv.setrectselectable(true); // 是否允许对 node 进行框选，默认：true
const dm = gv.getdatamodel(); // 获取图纸的 datamodel，简写形式：gv.dm()
dm.setbackground('#dadada'); // 同 dm.setbackground('rgba(218, 218, 218, 1)');
为什么要通过 datamodel 来设置图纸的背景而不是直接操作 graphview 本身？
在第一节我们提到过，为了能将我们创建的 2d/3d 数据保存与恢复，可以通过对 datamodel 进行序列化与反序列化来实现。注意，这里的序列化操作针对的是 datamodel 而不是视图组件。因此，像如 graphview 这种视图组件，其背景颜色这种显示属性需要通过配置到 datamodel 才能保存下来。而像缩放，平移等操作属性，则需要根据项目运行需要单独配置。
添加节点 -（ht.node）
有了 2d 图纸的 datamodel，我们便可以向其添加节点或者叫图元。这里我们添加了两个机柜图标。
/**************** 分别创建两个 ht 节点并添加到图纸中 ************************/
const server1 = new ht.node();
server1.setsize(40, 100); // 节点宽高。应当根据图片比例设置，不然会出现拉伸效果
server1.setposition(100, 100); // 节点位置。左上角为（0，0）坐标
server1.setimage('assets/server.png'); // 节点图片
server1.setname('server 1'); // 显示名称
dm.add(server1); // 添加到 datamodel中，也就是添加到图纸中
const server2 = new ht.node();
server2.setsize(40, 100);
server2.setposition(250, 100);
server2.setimage('assets/server.png');
server2.setname('server 2');
dm.add(server2); // 注意一定要添加到 datamodel 中
在传统前端（vue, react, html）的开发过程中，要添加一个节点，我们往往需要先手动创建该节点（如添加一个 icon）并添加到 html 下面。然后通过数据绑定对该节点进行操作。而在 ht 中，我们只需要将新增的节点添加到 datamodel 下面。ht 的视图组件会监听 datamodel 的变化，自动触发重新渲染操作。我们对节点的所有样式风格配置和操作都可以直接在节点上进行。
节点配置
ht.node（简称为 node）是 2d 图纸和 3d 场景呈现节点图元的基础类，它继承自 ht.data。在 ht.data 的基础上，其又新增了位置，大小，旋转，缩放，吸附等属性。这些属性都可以通过 set*/get* 来设置和获取。
在 graphview 中，新增一个 ht.node 节点，默认其会显示一个电脑图片。我们可以通过 setimage(image) 方法来更改。如在上例的代码中，我们找了一个机柜照片并将它给了新增的节点。
由于机柜图片可能很大，我们可以通过 setsize(width, height) 来对节点大小进行控制。通过配置不同的宽高还可以实现拉伸效果。如果不想要拉伸效果，则可以根据原始图片宽高比来设置节点的大小。
坐标系与坐标转换
添加的节点如果不指定位置，其默认会被放到（x: 0, y: 0）点。通过 node.setposition(x, y) 或 node.p(x, y) 可以控制节点的位置。通过 node.getposition() 或 node.p() 可以获取其坐标。在 graphview 中，如果不手动修改节点的坐标，其在 graphview 中的位置便是固定不变的。
由于 graphview 本身具有缩放、平移等属性，因此其里面的节点显示在浏览器上的位置是不固定的。因此我们可以知道 graphview 的坐标系与浏览器的坐标系是不一样的。
实际上，graphview 采用的是一个相对坐标系，其方向与 canvas 一致，即左上角为（0, 0）点。往右为 x 轴的正方向，往下为 y 轴的正方向。通过以下两个方法可以在 graphview 坐标与浏览器坐标之间进行转换。
graphview.getlogicalpoint(event): 传入 html 事件对象，将浏览器坐标转换为 graphview 中的逻辑坐标
graphview.getscreenpoint(point, y): 传入 graphview 中的坐标，转换为浏览器坐标
添加连线 - （ht.edge）
在添加了两个机柜图标之后，我们现在用连线将他们连接起来。ht 中的连线是用 ht.edge 实现的。
ht.edge 类型（简称 edge）用于连接起始和目标两个 node 节点，两个节点间可以有多条 edge 存在，也允许起始和目标为同一节点。 可通过 new ht.edge(source, target) 直接在构造函数中传入 source 和 target 节点对象，也可构建 edge 对象之后再分别设置。
getsource() 和 setscource(node) 获取和设置起始节点
gettarget() 和 settarget(node) 获取和设置目标节点
islooped() 判断连线的起始和目标是否为同一节点
/****************************** 创建连线 *************************************/
const edges = [];
// 创建三条连线连接 server1 和 server2
edges.push(createedge(4, 'green', 6, 'yellow', [20, 10]));
edges.push(createedge(3, '#fff', 3, '#000', [10, 10])); // 黑白线
edges.push(createedge(10, 'rgb(51,153,255)', 5, 'rgb(242,83,75)', [5, 10])); // 红蓝线
function createedge(width, color, dashwidth, dashcolor, pattern) {
const edge = new ht.edge(server1, server2);
edge.s({
'edge.width': width, // 连线宽度
'edge.gap': 30, // 连线与连线的距离
'edge.color': color, // 连线颜色。也可使用 rgb 或16进制颜色
'edge.dash': true, // 是否使用虚线
'edge.dash.width': dashwidth, // 虚线宽度
'edge.dash.color': dashcolor, // 虚线颜色
'edge.dash.pattern': pattern, // 虚线与连线的占比。[虚线, 连线]
'edge.offset': 0, // 偏移
});
dm.add(edge); // 注意一定要添加到 datamodel 中
return edge;
}
// 创建第四条连线用于 server1 自连线
const edge = new ht.edge();
edge.setsource(server1);
edge.settarget(server1);
edge.s({
'edge.width': 5, // 连线宽度
'edge.gap': 30, // 连线与连线的距离
'edge.color': 'pink', // 连线颜色。也可使用 rgb 或16进制颜色
'edge.dash': true, // 是否使用虚线
'edge.dash.width': 5, // 虚线宽度
'edge.dash.color': 'purple', // 虚线颜色
'edge.dash.pattern': [10, 10], // 虚线与连线的占比。[虚线, 连线]
'edge.offset': 0, // 偏移
});
dm.add(edge); // 注意一定要添加到 datamodel 中
edges.push(edge);
上面的代码创建了4条 edge，其中前三条分别是连接 server1 和 server2，第四条是 server1 自连接。ht.edge 的属性主要是由 edge.s() 方法来配置，该方法是 edge.setstyle() 的简写形式。edge.s() 主要用来配置节点内置的属性。ht for web 引擎会根据属性键值来渲染不同的效果。如果想要设置自定义属性，需要使用 edge.a() 来实现。
与 ht.node 相同的是，ht.edge 也是由 ht.data 扩展而来。但在大部分情况下，其又有自己的特点：
需要设置起始节点和目标节点。二者可以为同一个节点（如上例最后一条 edge）。
缺少起始或目标节点的 edge 不会在图纸上显示。
edge 会跟随节点移动。也就是说当我们拖动起始节点和目标节点的时候，其所相关的 edge 会跟随移动。
由于 edge 的位置由两个端点决定，因此 edge 不支持 getposition()/setposition() 方法。同样的，其宽度是在 edge.s() 中配置的，因此 edge 也不支持 getsize()/setsize() 方法。
除了上面示例中的配置，ht.edge 还支持自定义连线类型。如果嫌麻烦，也可以使用 ht 内置的十几种连线类型，如 edge.s(’edge.type’, ‘boundary’) 就代表连线仅连接到图元矩形边缘。如果要使用内置连线类型，需要引入连线类型插件：
在创建了连线后，如何让它们流动起来呢？这里就用到了动画功能。
动画 - ht.default.startanim()
要实现动画功能，不外乎有这样几个关键属性：动画播放时长，播放过程中的属性变化，播放完的回调事件。
ht 支持多种方式来实现动画。这里我们选择一种比较常用的。先来看代码：
/****************************** 连线动画 *************************************/
const animparams = {
// frames: 12, // 动画帧数
// interval: 10, // 动画帧间隔毫秒数
duration: 2000, // 动画播放时长
easing: function(t){ return t * t; }, // 动画缓动函数，默认采用`ht.default.animeasing`
finishfunc: function(){
ht.default.startanim(animparams);
}, // 动画结束后调用的函数。
action: function(v, t){ // action函数必须提供，实现动画过程中的属性变化。v代表通过easing(t)函数运算后的值，t代表当前动画进行的进度，范围：[0~1]
edges.foreach((edge, index) => {
const direction = index%2 == 0 ? 1 : -1;
edge.s('edge.dash.offset', t * 20 * direction);
});
}
};
ht.default.startanim(animparams);
这里 ht 用于播放动画的方法是 ht.default.startanim(animparams)，该方法会返回一个 anim 对象，可调用anim.stop(true) 终止动画。同时 anim 还具有 anim.pause() 和 anim.resume() 方法可用来中断和继续动画功能， 以及 anim.isrunning() 函数判断动画是否正在进行。
该方法所使用的参数也很简单：
duration: 动画播放时长。如果想精确地控制动画播放帧数及帧间隔，我们也可以用 frames + interval 的形式来控制动画播放。
easing: 缓动函数。使用数学公式来控制动画播放的速度与快慢。可参考
finishfunc: 播放完回调。在动画结束后，该方法会被执行。
action: 动作控制。节点的哪些属性需要变化都是在这里定义。如控制节点的位置，旋转，大小等。在动画执行过程中的每一帧都会调用一次该方法。其中的两个参数分别是：
t: 代表当前动画进行的进度。其范围是从开始执行0到执行结束1。该值的变化随着时间前进，是相对均匀的。如果我们想要动画匀速执行，这里可以用 t 来实现。
v: 代表通过 easing(t) 函数运算后的值。其范围在大部分情况下也是从0到1。但是这里的 v 值在变化上由 easing(t) 函数决定，不一定是均匀的。对于有的缓动效果，如 easeoutback () ，其 v 值在中间阶段就可能大于1。如果想要在动画中使用缓动效果，这里就需要使用 v 参数来控制属性变化。
小结
本节我们主要介绍了 ht for web 图纸的创建与基本配置。在 graphview 中，我们可以向其 datamodel 添加 ht.node 来绘制机柜。通过 node.setposition(x, y) 或 node.p(x, y) 方法可以控制节点的位置，并通过 node.getposition() 或 node.p() 方法来获取其坐标。同时，graphview 中的坐标系与浏览器坐标系不同，我们可以使用 graphview.getlogicalpoint(event) 和 graphview.getscreenpoint(point, y) 方法在两种坐标系之间进行转换。
对于连线，我们使用 ht.edge 类型表示。创建 ht.edge 对象时需要传入起始节点和目标节点，同时可以通过 edge.s() 方法配置其属性，如宽度、颜色、虚线等。在创建多条连线后，我们可以使用 ht.default.startanim(animparams) 方法来实现连线动画，其中 animparams 是一个对象，包含动画播放时长、缓动函数、动画结束回调函数和动作控制函数等参数。
苏州耐斯达总部暨研发生产基地开工
ZigBee无线网络协议层
基于DS28S60的双向身份验证示例，使用Jupyter笔记本
电缆受潮的原因是什么，它所造成的危害有哪些
浅谈MCM GPU的概念
HT for Web (Hightopo) 使用心得（2）- 2D 图纸、节点、连线 与基本动画
2023 年初至今 DigiKey 新增 175,000 多个新 SKU
Maxim推出带失效保护的PROFIBUS-DP/RS-48
外热成像测温系统应对疫情好助力
中国电子旗下华大半导体、中电锦江召开干部大会
智能茶盘的设计有效保证了使用的安全性和简便性
LinK：用线性核实现3D激光雷达感知任务中的large kernel
人机界面是什么意思
电动机的大修内容及周期是怎样规定的？
预计2019年智能音箱价值70亿美元 成为历史上价值增长最快的互联设备
中国移动威风不再,中国移动出现不利局面受多种因素所影响
可溶性聚四氟乙烯和聚四氟乙烯的区别
永磁同步电机的调试方法及详细步骤
浅谈集成运算放大器的主要应用
传iPad 3将采用视网膜显示技术