基于HTML5 Canvas 实现矢量工控风机叶轮旋转

时间  2019-12-09
标签 基于 html5 html canvas 实现 矢量 风机 叶轮 旋转 栏目 HTML5 繁體版
原文   原文链接

以前在拓扑上的应用都是些静态的图元，今天咱们将在拓扑上设计一个会动的图元——叶轮旋转。html

先看看最后咱们实现的效果：http://www.hightopo.com/demo/...node

591709-20161014121211640-1160214789.png

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

200109541767916.png

从模型上看，这个叶轮模型有三个叶片，每个叶片都是不规则图形，显然没法用上咱们HT for Web的基础图形来拼接，那么咱们该怎么作呢？很简单，在HT for Web中提供了自定义图形的方案，咱们能够经过自定义图形来绘制像叶片这种不规则图形。app

在绘制叶片以前，咱们得先来了解下HT for Web的自定义图形绘制的基本知识：函数

绘制自定义图形须要制定矢量类型为shape，并经过points的Array数组指定每一个点信息， points以[x1, y1, x2, y2, x3, y3, ...]的方式存储点坐标。曲线的多边形可经过segments的Array数组来描述， segment以[1, 2, 1, 3 ...]的方式描述每一个线段：spa

  1. moveTo，占用1个点信息，表明一个新路径的起点设计

  2. lineTo，占用1个点信息，表明从上次最后点链接到该点code

  3. quadraticCurveTo，占用2个点信息，第一个点做为曲线控制点，第二个点做为曲线结束点htm

  4. bezierCurveTo，占用3个点信息，第一和第二个点做为曲线控制点，第三个点做为曲线结束点对象

  5. closePath，不占用点信息，表明本次路径绘制结束，并闭合到路径的起始点

200107375048703.png

对比闭合多边形除了设置segments参数外，还能够设置closePath属性： * closePath获取和设置多边形是否闭合，默认为false，对闭合直线采用这种方式，无需设置segments参数。

好了，那么接下来咱们开始设计叶片了

200110203631384.png

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, 4, 2, 2
]

200111216914080.png

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

200111418329892.png200111522072357.png

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
]

看吧，如今是否是有模有样了，如今叶片已经有了，那么接下来要作的就是使用三个这样的叶片拼接成一个叶轮。

将已有的资源拼接在一块儿须要用到矢量中的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
        },
        {
            type: 'image',
            name: 'vane',
            rect: [20.45, 89.2, 97, 106],
            rotation: 2 * Math.PI / 3 * 2
        }
    ]
});

200112489578085.png

在代码中，咱们定义了三个叶片，而且对第二个和第三个叶片作了旋转和定位的处理，让这三个叶片排布组合成一个叶轮来，可是怎么能让叶轮中间空出一个三角形呢，这个问题解决起来不难，咱们只须要在叶片的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数组的最后面添加一个描述，再来看看最终的效果：

200113329109524.png

到这个叶轮的资源就作好了，那么接下来就是要让这个叶轮旋转起来了，咱们先来分析下：

要让叶轮旋转起来，其实原理很简单，咱们只须要设置rotation属性就能够实现了，可是这个rotation属性只有在不断的变化中，才会让叶轮旋转起来，因此这个时候就须要用到定时器了，经过定时器来不断地设置rotation属性，让叶轮动起来。

恩，好像就是这样子的，那么咱们来实现一下：

首先是建立一个节点，并设置其引用的image为impeller，再将其添加到DataModel，令节点在拓扑中显示出来：

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);

OK了，好像就是这个效果，可是当你选中这个节点的时候，你会发现这个节点的边框在不停的闪动，看起来并非那么的舒服，为何会出现这种状况呢？缘由很简单，当设置了节点的rotation属性后，节点的显示区域就会发生变化，这个时候节点的宽高天然就发生的变化，其边框也天然跟着改变。

还有，在不少状况下，节点的rotation属性及宽高属性会被当成业务属性来处理，不太适合被实时改变，那么咱们该如何处理，才能在不不改变节点的rotation属性的前提下令叶轮转动起来呢？

在矢量中，好像有数据绑定的功能，在手册中是这么介绍的：

绑定的格式很简单，只需将之前的参数值用一个带func属性的对象替换便可，func的内容有如下几种类型：

  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');

200115471605910.png

果真生效了，这下好了，咱们就可让叶轮旋转变得更加完美了，来看看具体该这么作。

首先，咱们先在节点上定义一个自定义属性，名字为：impeller_rotation

node.setAttr('impeller_rotation', 0);

而后再定义一个名字为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就可让节点中的叶轮旋转起来，而且不会影响到节点自身的属性，这就是咱们想要的效果。

200116501445536.png

在2D上能够实现，在3D上同样能够实现，下一章咱们就来说讲叶轮旋转在3D上的应用，今天就先到这里，下面附上今天Demo的源码，有什么问题欢迎你们咨询。

http://www.hightopo.com/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,
    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.setPosition(200, 400);
    node.setImage('rotate_impeller');
    node.setAttr('impeller_rotation', 0);
    node.setAttr('vane_background', 'blue');
    dataModel.add(node);

    var node1 = new ht.Node();
    node1.setSize(166, 181);
    node1.setPosition(500, 400);
    node1.setImage('impeller');
    dataModel.add(node1);

    window.setInterval(function() {
        var rotation = 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);
}
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程