现在网页设计里，图片越漂亮越好。特别是遇到像叶轮那种形状怪异的图画时，使用HTforWeb的自定义图形功能就超级靠谱。这样就能画得更精细，而且还保证蛋糕图在页面上跑得飞快。既好看又好用，设计师们也有更大发挥空间了。
要做个自定义图形，其实不难，就几步关键动作而已。第一就是画出图形的样子。这通常用一堆点跟线搞定。比如说，我们可以用lineTo把这些点连起来，画出图形的轮廓。然后，再设下closePath这个属性，保证图形是封口的，像叶轮这种需要完全封闭的图形尤为关键！
处理叶轮的不规则性
做这个设计，难就难在怎么处理叶轮的各种奇怪造型。每个叶片都长得别具一格，角度各异，用普通的搭积木根本行不通。所以这时候，特意定制的图形就显得尤为重要。我们可以按照设备的真实大小和样式，把每个叶片都画得清清楚楚。这可不仅仅是外观，还有那些深入到叶子里边的复杂结构，比如花纹啊什么的，都得一丝不苟地画出来！
画叶轮的时候，别忘了还要搞定它转起来的效果。用HTforWeb简单地改改节点的rotation属性就能让它们动起来，不过有时候这种方法会误伤其它属性，比如宽度高度啥的。所以，咱们还是试试数据绑定！把旋转效果丢给自定义属性负责，这下既能让叶轮愉快地转动，也不怕伤害到其它功能~
矢量图形的应用
HTforWeb中的矢量图功能挺厉害的！只要运用好它就能成功实现图形放大缩小、旋转不变形，对于像叶轮这样对大小和形状有严苛要求的东西就显得十分关键了。具体怎么操作？答案就是选定矢量图类型，新建个矢量文件，然后把这个向量画用到叶轮设计里去！
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'
}
]
});
矢量图牛就牛在它跟别的图好搭档！举个例子，咱们可以用矢量的方式弄一下叶轮的叶子，然后调整它们的位置和方向，设计起来更自在，管他们有多复杂都能轻松应对。这样子设计出来的东西既有变化，又简单明了。
points: [
92, 67,
93, 35, 78, 0, 62, 7,
0, 70,
60, 98
],
segments: [
1, 4, 2, 2
]
叶轮旋转的实现
在设计中，让叶轮转起来可说是个亮点。利用HTforWeb的定制属性，我们就能把握住叶片旋转的关键了。举个例子，咱们可以设个Timer，让叶片在规定的时间段内换个方向，这样就有连贯不断的感觉了。
这个过程里，咱们好好用下数据绑定，把旋转效果绑到一个特定的属性上去，就不怕它影响别的属性。这样，叶轮转起来看着很顺溜，整个设计也能保持稳定。
2D与3D的转换
points: [
92, 67,
93, 35, 78, 0, 62, 7,
29, 13, 4, 46, 0, 70,
28, 53, 68, 60, 60, 98
],
segments: [
1, 4, 4, 4
]
2D画叶轮怎样画？咱们详细说过！不过要注意，HTforWeb可是也能创建3D图。所以，只要你学会了2D图形怎么画，那3D环境里不也就会画了，简单得很！
在3D环境里，叶轮的转动和其他动感效果会更生动。你可以改变它的深度和角度，就像在现实生活中一样！这样既能让画面更好看，还能带给大家更真实的感受！
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
},
{
type: 'image',
name: 'vane',
rect: [20.45, 89.2, 97, 106],
rotation: 2 * Math.PI / 3 * 2
}
]
});
实际应用案例分析
为了更深层次地了解HTforWeb在叶片设计上怎么用，来看几个实例。比如说在那种工业监视系统里，拿着HTforWeb，设计师就能直接看着叶片运行情况来调整，这样干活儿快多了，还能降低犯错的可能。
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
]
这些事儿得靠自定义图形和矢量图形来扛。画图、控形状，设计师才能让机器稳稳地转起来哟。还有，利用数据绑和计时工具，就能够创造出叶轮这样复杂的动态效果！
总结与展望
咱来说说，HT咋样做到这么牛，能搞定叶轮这种奇怪图形？就是看出它有个很棒的自定义图形功能。不论是画画还是搞动作，它都让人眼前一亮，实力非凡！
以后，tech越来越发达了，我们就希望HTforWeb能在设计这块儿大展拳脚。不论是2D还是3D，静态还是动态，它都会给咱们带来无数可能。
亲爱的朋友们，我这就问个小问题给你们有谁做项目时候碰到过非规则形状要处理的事？都是怎么应对的快来发表下观点。别忘了评论里点赞还有文章也要共享！
var node = new ht.Node();
node.setSize(166, 181);
node.setPosition(400, 400);
node.setImage('impeller');
dataModel.add(node);
window.setInterval(function() {
var rotation = node.getRotation() + Math.PI / 10;
if (rotation > Math.PI * 2) {
rotation -= Math.PI * 2;
}
node.setRotation(rotation);
}, 40);
评论0