首页 小编推荐正文

之前在拓扑上的运用都是些静态的图元,今日咱们将在拓扑上规划一个会动的图元——叶轮旋转。

咱们先来看下这个叶轮模型长什么样

从模型上看,这个叶轮模型有三个叶片,每一个叶片都是不规则图形,明显无法用上咱们HT for Web的根底图形来拼接,那么咱们该怎样做呢?很简单,在HT for Web中供给了自界说图形的计划,咱们能够经过自界说图形来制作像叶片这种不规则图形。

在制作叶片之前,咱们得先来了解下HT for Web的自界说图形制作古代男男的基本知识:

制作自界说图形需求拟定矢量类型为shape,并经过points的Array数组指定每个点信息, points以[x1, y1, x2, y2, x3, y3成功88规律, ...]的方法存储点坐标。曲线的多边形可经过segments的Array数组来描绘, segment以[1, 2, 1, 3 ...]的方法描绘每个线段:

1: moveTo,占用1个点信息,代表一个新途径的起点

2: lineTo,占用1个点信息,代表从前次最后点连接到该点

3: quadraticCurveTo,占用2个点信息,第一个点作为曲线控制点,第二个点作为曲线完毕点

4: bezierCurveTo,占用3个点信息,第一和第二个点作为曲线控制点,第三个点作为曲线完毕点

5: closePath,不占用点信息,代表本次途径制作完毕,并闭合到途径的起始点

比照闭合多边形除了设置segments参数外,还能够设置closePath特点: * closePath获取和设置多边形是否闭合,默以为false,对闭合直线选用这种方法,无需设置segments参数。

好了,那么接下来咱们开端规划叶片了

ht.Default.setImage('vane', {
width: 97,
height: 106,
comps: [
{
type: 'shape',
points: [
92, 67,
62, 7,
0, 70,
60, 98
],
segments: [
1, 2, 2, 2
],
background : 'red'
}
]
})臀缝;

咱们在矢量中界说了4个极点,而且将这4个极点经过直线勾勒出叶片的大致形状,尽管有些笼统,可是,接下来将会经过增加控制点和改动segment参数来让这个叶片发作蜕变。

首要咱们经过bezierCurveTo方法向第一个和第二个极点之间的线段增加两个控制点,然后制作出曲线,以下是points及segments特点:

points: [
92, 67,
93, 35, 78美媛, 0, 62, 7,
0, 70,
60, 98
],
segments: [
1, 依据HT for Web矢量完结2D叶轮旋转4, 2, 2
]

这时分与上一个图相比较,有一条边一件有些弧度了,那么接下来就来处理第二条边和第三条边

points: [
92, 67,
93, 35, 78, 0, 62, 7,
29, 13, 4, 46, 0, 70,
28, 5农门继妃之错嫁离王府3, 68, 60, 60, 98
],
segments: [
1, 4, 4, 4
]

看吧,现在是不是有模有样了,现在叶片现已有了,那么接下来要做的便是运用三个这样的叶片拼接成一个叶轮。

将已有的资源拼接在一起需求用到矢量中的image类型类界说新的矢量,详细的运用方法如下:

ht.Default.setImage('impeller', {
width: 166,
height: 180.666,
comps : [
{
type: 'image',
name: 'vane',
rect: [0, 0, 97, 106]
},
{
type: 'image',
name: 'vane',
rect: [87.45, 26.95, 97, 106],
rotation: 2 * Math.PI / 3
},
{
ty陈书林pe: 'image',
name: 'vane',
rect: [20.45, 89.2, 97, 106],
rotation: 2 * Math.PI / 3 * 2
}
]
});

在代码中,咱们界说了三个叶片,而且对第二个和第三个叶片做了旋转和定位的处理,让这三个叶片爆露排布组合成一个叶轮来,可是怎样能让叶轮中心空出一个三角形呢,这个问题解决起来不难,咱们只需求在叶片的points特点上再多加一个极点,就能够填充这个三角形了,代码如下:

points: [
92, 67,
93, 35, 78, 0, 62, 7,
29, 13, 4, 46, 0, 70,
28, 53, 68, 60, 60, 98,
97, 106
],
segments: [
1, 4, 4, 4, 2
]

在points特点上增加了一个极点后,别忘了在segments数组的最后面增加一个描绘,再来看看终究的作用:

到这个叶轮的资源就做好了,那么接下来便是要让这个叶轮旋转起来了,咱们先来剖析下:

要让叶轮旋转起来,其实原理很简单,咱们只需求设置rotation特点就能够完结了,可是这个rotation特点只要在不印度尼西亚巴厘岛气候断的改动中,才会让叶轮旋转起来,所以这个时分就需求用到定时器了,经过定时器来不断地设置rotation特点,让叶轮动起来。

恩,如同便是这姿态的,那么咱们来完结一下:

首要是创立一个节btkszx点,并设置其引证的image为impeller,再将其增加到DataModel,令节点在拓扑中显现出来:

var node =丁谷村 n曼若姿ew ht.Node();
node.setSize(166, 181);
node.setPosition(400, 400);
node.setImage('impeller');
dataModel.add(node);

接下来便是增加一个定时器了:

window.setInterval(function() {
var ro成都龙泉气候tation = node.getRotation() + Math.PI / 10;
if (rotation > Math.PI * 2) {
rotation -= Math.PI * 2;
}
node.setRotation(rotation);
}, 40);

OK了,如同便是这个作用,可是当你捐精护理选中这个节点的时分,你会发现这个节点的边框在不断的闪烁,看起来并不是那么的舒畅,为什么会呈现这种状况呢?原因很简单,当设置了节点的rotation特点后,节点的显现区域就会发作改动,这个时分节点的宽高天然就发作的改动,其边框也天然跟着改动。

还有,在许多状况下,节点的rotation特点及宽高特点会被当成事务特点来处理,不太合适被实时改动,那么咱们该怎么处理,才能在不不改动节点的rotation特点的条件命令叶轮滚动起来呢?

在矢量中,如同有依据HT for Web矢量完结2D叶轮旋转数据绑定的功用,在手册中是这么介绍的:

绑定的格局很简单,只需将曾经的参数值用一个带func特点的目标替换即可,f依据HT for Web矢量完结2D叶轮旋转unc的内容有以下几种类型:

1. function类型,直接调用该函数,并传入相关Data和view目标,由函数回来值决议参女配捉妖日志数值,即func(data, view);调用。

2. string类型:

2.1 style@***最初,则回来data.getStyle(***)值,其间***代表style的特点名。

2.2 attr@***最初,则回来data.getAttr(***)值,其间***代表attr的特点名。

2.3 field@***最初,则回来data.***值,其间***代表data的特点名。

2.4 假如不匹配以上状况,则直接将string类型作为data目标的函数名调用data.***(view),回来值作为参数值。

除妃常淡定废材女玩棋迹了func特点外,还可设置value特点作为默认值,假如对应的func获得的值为undefined或null时,则会选用value特点界说的默认值。 例如以下代码,假如对应的Data目标的attr特点stateColor为undefined或null时,则会选用yellow色彩:

color: {
func: 'attr@stateColor',
value: 'yellow'
}

数据绑定的用法现已介绍得很清楚了,咱们无妨先试试绑定叶片的背景色吧,看下好不好使。在矢量vane中的background特点设置成数据绑定的方式,代码如下:

background : {
value : 'red',
func : 'attr@vane_background'
}

在没有设置vane_background特点的时分,令其去red为默认值,那么接下来咱们来界说下vane_background特点为blue,看看叶轮会不会变成蓝色:

node.setAttr('vane_background', ‘blue');

看下作用:

公然收效了,这下好了,咱们就能够让叶轮旋转变得愈加完美了,来看看依据HT for Web矢量完结2D叶轮旋转详细该这么做。

首要,咱们先在节点上界说一个自界说特点,姓名为:impeller_rotation

node.setAttr('impeller_rotation', 0);

然后再1183199界说一个姓名为rotate_impeller的矢量,并将rotation特点绑定到节点的impeller_rotation上:

ht.Default.setImage('rotate_impeller', {
width : 220,
height : 220,
comps : [
{
type : 'image',
name : 'impeller',
rect : [27, 20, 166, 180.666],
rotation : {
func : function(data) {
return data.getAttr('impeller_rotation');
}
}
}
]
});

这时分咱们在定时器中修正节点的rotation特点改成修正自界说特点impeller_rotation就能够让节点中的叶轮旋转起来,而且不会影响到节点本身的特点,这便是咱们想要的作用。

在2D上能够完结,在3D上相同能够完结,下一章咱们就来讲讲叶轮旋转在3D上的运用,今日就先到这儿,下面附上今日Demo的源码,有什么问题欢迎我们咨询。

 ht.Default.setImage('vane', {
width : 97,
height : 106,
comps : [
{
type : 'shape',
points : [
92, 67,
93许哲珮, 35, 78, 0, 62, 7,
29, 13, 4, 46, 0, 70,
28, 53, 68, 60, 60, 98,
97, 106
],
segments : [
1, 4, 4, 4, 2
],
background : {
value : 'red',
func : 'attr@vane_background'
}
}
]
});
ht.Default.setImage('impeller', {
width : 166,
height : 180.666,
依据HT for Web矢量完结2D叶轮旋转comps : [
{
type : 'image',
name : 'vane',
rect : [0, 0, 97, 106]
},
{
type : 'image',
name : 'vane',
rect : [87.45, 26.95, 97, 106],
rotation : 2 * Math.PI / 3
},
{
type : 'image',
name : 'vane',
rect : [20.45, 89.2, 97, 106],
rotation : 2 * Math.PI / 3 * 2
}
]
});
ht.Default.setImage('rotate_impeller', {
width : 220,
height : 220,
comps : [
{
type : 'image',
name : 'impeller',
rect : [27, 20, 166, 180.666],
rotation : {
func : function(data) {
return data.getAttr('impeller_rotation');
}
}
}
]
});
function init() {
var dataModel = new ht.DataModel();
var graphView = new ht.graph.GraphView(dataModel);
var view = graphView.getView();
view.className = "view";
document.body.appendChild(view);
var node = new ht.Node();
node.setSize(220, 220);
node.setPosit依据HT for Web矢量完结2D叶轮旋转ion(200, 400);
node.setImage('rotate_impeller');
node.setAttr('impeller_rotation', 0);
node.setAttr('vane_background', 'blue');
dataModel.add(n依据HT for Web矢量完结2D叶轮旋转ode);
var node1 = new ht.Node();
node1.setSize(166, 前田香181);
node1.setPosition(500, 400);
node1.setImage('impeller');
dataModel.add(node1);
window.setInterval(function() {
var rotatio张欣源剑灵n = node.a('impeller_rotation') + Math.PI / 10;
if (rotation > Math.PI * 2) {
rotation -= Math.PI * 2;
}
node.a('impeller_rotation', rotation);
node1.setRotation(rotation);
}, 40);
}
版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。