Industrial 2D impeller rotation based on HTML5 canvas

Previous applications on topologies are static primitives, and today we will design a moving entity-the impeller rotation-on the topology.

Http://www.hightopo.com/guide/guide/core/serialization/examples/example_exportimport.html

Let's see what this impeller model looks like.

From the model, this impeller model has three blades, each blade is irregular graphics, obviously can not be used on our HT for Web -based graphics to splicing, then what should we do? It's easy to provide custom graphics in the HT for Web, and we can draw irregular shapes like blades with custom graphics.

Before we draw the blades, we have to understand the basics of custom graphics drawing for the HT for Web:

Drawing a custom graphic requires developing a vector type of shape and specifying each point information by points array arrays, points to [x1, y1, x2, y2, x3, Y3, ...] Store the point coordinates in the same way. The polygon of the curve can be described by an array of segments, segment with [1, 2, 1, 3 ...] Describe each segment in the same way:

1:moveto, takes up 1 point information, represents the starting point of a new path

2:lineto, which occupies 1 point information, represents the connection from the last point to the point

3:quadraticcurveto, occupies 2 point information, the first point as the curve control points, the second point as the curve end point

4:beziercurveto, occupies 3 point information, first and second points as curve control points, and the third point as the end point of a curve

5:closepath, does not occupy point information, represents the end of the path drawing, and closes to the start point of the path

Compare closed polygons In addition to setting the segments parameter, you can also set the Closepath property: * Closepath gets and sets whether the polygon is closed, defaults to false, and does not need to set the segments parameter for closed lines.

Well, then we're going to start designing the blades.

Ht. Default.setimage (' vane ', {    width:97,    height:106,    comps: [        {            type: ' Shape ',            points: [                                7,0,2, 98 ], Segments: [1, 2, 2, ], background: ' Red ' }});         

We define 4 vertices in the vector , and the 4 vertices are outlined in a straight line the approximate shape of the blade, though somewhat abstract, but the next step is to change the blade by adding control points and changing the segment parameters.

First we add two control points to the segment between the first and second vertices by Beziercurveto way, drawing out the curves, and the following are the points and segments properties:

Points: [    7, 0,    0,1,            4, 2, 2] 

At this time compared to the previous diagram, there is a certain arc of a side, then the second and third side to deal with the next side

Points: [0, 7, +, 4, +,            0,    +------------ 1>],segments: [    1, 4, 4, 4]    

See, now is not a model has a kind of, now the blade has already, then the next thing to do is to use three such blades splicing into an impeller.

Stitching the existing resources together requires the use of the image type class in the vector to define a new vector, using the following method:

Ht. Default.setimage (' impeller ', {    width:166,    height:180.666,    comps: [        {            type: ' Image ',            name: ' Vane ',            rect: [0, 0, 106]}, {type: ' image ', Name: ' Vane ', rect: [87.45, 26 .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 the second and third blades do the rotation and positioning of the processing, so that the three blade arrangement into an impeller, but how to let the impeller in the middle empty a triangle, this problem is not difficult to solve, we only need to add a vertex on the points property of the blade , you can populate the triangle with the following code:

Points: [    0],7, 4,        0,        +---------------- 106],segments: [1, 4, 4, 4, 2]     

After adding a vertex to the points property, don't forget to add a description to the last side of the segments array, and then look at the final effect:

To the resources of this impeller is done, then the next step is to let the impeller spin up, we first to analyze:

To make the impeller rotation, in fact, the principle is very simple, we only need to set the rotation property can be achieved, but this rotation property only in constant change, will let the impeller rotation, so this time need to use the timer, The Rotation property is constantly set by the timer, allowing the impeller to move up.

Well, it's like that, so let's do this:

The first is to create a node and set its referenced image to impeller, and then add it to Datamodel, so that the node is displayed in the topology:

var node = new ht. Node (); Node.setsize (166, 181); node.setposition (+);node.setimage (' impeller ');d Atamodel.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);}, +);   

OK, it seems that this effect, but when you select this node, you will find that the border of the node is constantly flashing, it does not seem so comfortable, why this situation? The reason is simple, when the node's rotation attribute is set, the display area of the node changes, and the width and height of the node changes naturally, and its border changes naturally.

Also, in many cases, the rotation attribute of the node and the width of the property will be treated as a business attribute, not too suitable to be changed in real time, then how can we handle, in order to not change the rotation properties of the node to order the impeller rotation?

In the vector , there seems to be a function of data binding, as described in the manual:

The format of the binding is simple, just replace the previous parameter value with an object with the Func attribute, and the contents of the Func have the following types:

1. function type, directly call the functions and pass in the relevant data and view object, the function return value determines the parameter value, namely func (data, view);

2. String Type:

2.1 [Email protected]*** begins with the Data.getstyle (* * *) value, where * * * represents the property name of the style.

2.2 [Email protected]*** begins with the data.getattr (* * *) value, where * * * represents the property name of the attr.

2.3 [Email protected]*** begins with the data.*** value, where * * * represents the property name of data.

2.4 If the above conditions are not matched, the string type is directly called data.*** (view) as the function name of the data object, and the return value is the value of the parameter.

In addition to the Func property, you can set the Value property as the default value, and if the corresponding func obtains a value of undefined or null, the default value defined by the Value property is taken. For example, the following code uses the yellow color if the attr property of the corresponding data object statecolor to undefined or null:

Color: {    func: ' [email protected] ',    value: ' Yellow '} 

The usage of data binding has been introduced very clearly, we might as well first try to bind the background color of the blade, look at the good. The Background property in vector Vane is set to the form of data binding, with the following code:

Background: {    value: ' Red ',    func: ' [email protected]_background '} 

In the absence of setting the Vane_background property, let it go to red as the default value, then we define the next Vane_background property to blue, to see if the impeller will turn blue:

Node.setattr (' Vane_background ', ' Blue ');

Look at the effect:

Sure enough, it's OK, so we can make the impeller spin more perfect, to see exactly what to do.

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

Node.setattr (' Impeller_rotation ', 0);

Then define a vector named Rotate_impeller and bind the rotation property to the impeller_rotation of the node:

Ht. Default.setimage (' Rotate_impeller ', {    width:220,    height:220,    comps: [        {            type: '  Image ',            name: ' impeller ',            rect: [166, 180.666], rotation: {func:function(data) {return data.getattr (' impeller_rotation ');}}} ]});

At this time we change the rotation property of the node in the timer to modify the custom property impeller_rotation can let the impeller in the node rotate, and do not affect the node itself properties, this is what we want to effect.

Can be achieved on the 2D, the same can be achieved on 3D, the next chapter we talk about the impeller rotation in the application of 3D, today first to here, the following is attached to the source of the demo today, what questions are welcome to consult.

Http://www.hightopo.com/guide/guide/core/serialization/examples/example_exportimport.html

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: ' [email protected]_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 '); (}}}]}); functionInit () {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 (node.setposition); 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 (at $ ); Node1.setimage (' impeller ' ); Datamodel.add ( NODE1); Window.setinterval (function  () {var rotation = node.a (' impeller_rotation ') + MATH.PI/10 ; if (Rotation > M Ath. PI * 2 ) {rotation-= Math.PI * 2 ;} node.a (' Impeller_rotation ' , rotation); node1.setrotation (rotation); }, + ),}               
                                          

Industrial 2D impeller rotation based on HTML5 canvas