2D impeller rotation and 2d impeller rotation based on HT for Web vector

2D impeller rotation and 2d impeller rotation based on HT for Web vector

Previously, some static elements were used in topology applications. Today, we will design a moving element, impeller rotation, on the topology.

Let's first look at what the impeller model looks like.

 

From the model perspective, this impeller model has three blades, each of which is irregular and obviously cannot be spliced using the basic HT for Web graphics. So what should we do? It's easy. We provide a custom image solution in HT for Web. We can use custom images to draw irregular images like blades.

Before creating a blade, you must first understand the basic knowledge of HT for Web custom graphics:

To draw a custom image, you must set the vector type to shape and specify the information of each vertex through the Array of points. In points, [x1, y1, x2, y2, x3, y3,...] storage point coordinates. The polygon of the curve can be described through the Array of segments. The segment describes each line segment in the form of [1, 2, 1, 3:

1: moveTo, occupying 1 point information, representing the starting point of a new path

2: lineTo, which occupies 1 point of information, indicates connecting to the point from the last point

3: quadraticCurveTo takes up two points. The first point is used as the curve control point, and the second point is used as the curve end point.

4: bezierCurveTo takes up three points. The first and second points are used as the curve control points, and the third points are used as the curve end points.

 

5: closePath, which does not occupy the vertex information, indicates that the path is drawn and closed to the starting point of the path.

In addition to setting the segments parameter, you can also set the closePath attribute: * closePath to get and set whether the polygon is closed. The default value is false. This method is used to close a straight line, so you do not need to set the segments parameter.

Now, let's start designing the blade.

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

 

We have defined four vertices in the vector and outlined the approximate shape of the blade through a straight line. Although these four vertices are abstract, next, the blade will be transformed by adding control points and changing the segment parameter.

First, we use bezierCurveTo to add two control points to the line segment between the first vertex and the second vertex to draw a curve. The following are the points and segments attributes:

points: [    92, 67,    93, 35, 78, 0, 62, 7,    0, 70,    60, 98],segments: [    1, 4, 2, 2]

 

At this time, compared with the previous figure, there is a radian in one side, so next we will process the second side and the third side.

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]

 

Let's see if there is a pattern. Now the blade is ready. Next we need to splice three of these blades into an impeller.

To splice existing resources together, you need to use the image class in the vector to define a new vector. The specific usage is as follows:

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

 

In the code, we define three blades, and rotate and locate the second and third blades so that the three blades can be combined into an impeller, but how can we leave a triangle in the middle of the impeller? It is not difficult to solve this problem. We only need to add a vertex to the points attribute of the blade to fill the triangle. The Code is as follows:

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]

 

 

After adding a vertex to the points attribute, don't forget to add a description at the end of the segments array to see the final effect:

The resources of this impeller are ready, so the next step is to make the impeller rotate. Let's analyze it first:

To make the impeller rotate, the principle is very simple. We only need to set the rotation attribute to achieve it. However, this rotation attribute will rotate the impeller only when it is constantly changing, so the timer is needed at this time. The rotation attribute is constantly set through the timer to let the impeller move.

Well, it seems like this, so let's implement it:

Create a node, set the referenced image to impeller, and add it to DataModel to display the node in the topology:

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

 

The next step is to add a Timer:

window.setInterval(function() {    var rotation = node.getRotation() + Math.PI / 10;    if (rotation > Math.PI * 2) {        rotation -= Math.PI * 2;    }    node.setRotation(rotation);}, 40);

 

Okay, it seems like this is the effect, but when you select this node, you will find that the border of this node is constantly flashing, it does not look so comfortable, why is this happening? The reason is very simple. When the rotation attribute of the node is set, the display area of the node changes. At this time, the width and height of the node naturally change, and the border of the node naturally changes.

Also, in many cases, node rotation attributes and width/height attributes are treated as business attributes and are not suitable for real-time changes. What should we do, can the impeller be rotated without changing the node's rotation attribute?

In vector, it seems that there is a data binding function, which is described in the Manual as follows:

The binding format is simple. You only need to replace the previous parameter values with an object with the func attribute. the func content has the following types:

1. For the function type, call the function directly and pass in the relevant Data and view object. The parameter value is determined by the function return value, that is, func (data, view); call.

2. string type:

2.1 style @ ***, the value of data. getStyle (***) is returned. ** indicates the attribute name of the style.

2.2 attr @ ***, the value of data. getAttr (***) is returned. ** indicates the attribute name of attr.

Starting with 2.3 field @ ***, the value of data. *** is returned. ** indicates the attribute name of data.

2.4 if the preceding conditions do not match, the string type is directly used as the function name of the data object to call data. *** (view), and the return value is used as the parameter value.

In addition to the func attribute, you can also set the value attribute as the default value. If the value obtained by the corresponding func is undefined or null, the default value defined by the value attribute is used. For example, the following code uses the yellow color if the attr attribute stateColor of the corresponding Data object is undefined or null:

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

 

The usage of Data Binding has been clearly introduced. Let's try to bind the background color of the blade first. Set the background attribute in vector vane to the form of data binding. The Code is as follows:

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

 

When the vane_background attribute is not set, set "red" to the default value. Next we will define the "vane_background" attribute as "blue" to see if the impeller will become blue:

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

 

See the following results:

It takes effect. Now, we can make the rotation of the impeller more perfect. Let's take a look at this.

First, we first define a custom attribute on the node, the name is: impeller_rotation

node.setAttr('impeller_rotation', 0);

 

Then define a vector named rotate_impeller and bind the rotation attribute to the impeller_rotation node:

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

 

At this time, we modify the rotation attribute of the node in the timer to modify the custom attribute impeller_rotation so that the impeller in the node can be rotated without affecting the attributes of the node. This is what we want.

It can be implemented in 2D, just like in 3D. In the next chapter, let's talk about the application of impeller rotation in 3D. Today we will come here first. The source code of today's Demo is attached below, if you have any questions, please contact us.

 

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

 

 

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.