Design of HTML5 topological graphic component for vectorization

HT has been praised by customers is its full vectorization design features, vector compared to the traditional picture benefits too much:

Www.hightopo.com/guide/guide/core/vector/ht-vector-guide.html

• The vector can be stepless scale, the interface is not really blurred
• Text content describing vectors is much smaller than pictures
• At present, various window.devicepixelratio inconsistent devices, vectors may be the only thorough solution
• Business Data binding

The introduction of vectors generally think of SVG, but this is a deceptive thing, so many years have not seen a perfect implementation, browser implementation is very diverse, advanced properties can not play, Adobe svg viewer for many years to stop the update, Flex support SVG import is only for basic properties to play, Of course, SVG is not useless highcharts or very good use of the Java field has been maintained for many years Batik project available. But, I still do not like the DOM is too heavy is the element, do not like the large-scale all-inclusive do not have a perfect standard, and another XML, Flex Mxml or SLIVERLGIHT/WPF XAML to describe the graphics is cumbersome and inflexible, HTML5-based HT for The web naturally chooses a JSON-formatted route with a custom simple standard.

is the HT registered picture function, for traditional pictures can naturally also through HT. Default.setimage (' Sunrise ', ' ... /res/sunrise.png ') registers the URL path, but when the registered object is a JSON data of the HT vector format standard, HT is graphically drawn with the vector information described by the JSON, which is only a description of the picture on the left, The red four sunrise on the right is the result of a reusable implementation of nested definitions based on a registered JSON.

Ht. Default.setimage (' Group-sunrise ', {    width:240,    height:160,    clip:true,    color: ' Red ',    comps: [        {            type: ' image ',            name: ' Sunrise ',            rect: [0, 0,            opacity:0.3        },        {            type: ' Image ' ,            name: ' Sunrise ',            rect: [0, +, +],            Rotation:math.pi/4        },        {            type: ' Image ',            name: ' Sunrise ',            rect: [0,            shadow:true        },        {            type: ' image ',            name: ' Sunrise ', rect: [+, +, +            ]}    ];

As the above code registers a new vector called ' group-sunrise ', which consists of four components, each part is a registered ' sunrise ' vector, and the different parts can be rotated independently, with shading and transparency effects set.

At this point can only be said to re-build an SVG wheel no special, if only to achieve the function of vectorization, that cost so much strength to customize a set of standards is not significant, in fact, HT for Web settings vector is not intended for vectorization, but the core concept of HT products: to make it easier for programmers to develop graphical interface!

Http://www.hightopo.com/guide/guide/core/3d/ht-3d-guide.html

As an old front end that passed MFC, Qt, Swing, Flex, SILVERLIGHT/WPF and Cocoa (where the front end is a bit out of time, and now the frontend seems to refer only to the page) programmer, I can draw a good custom interface, but I am still very afraid of customers to change the West, Especially in the power and industrial industries there are a whole bunch of industry icons that need you to draw, originally very interesting graph 2D graphics technology, but the daily repeated drawing of different types of equipment of the physical life will also cause people to collapse. So the HT for Web not only defines the vector format, implements the vector drawing, but also provides the vector editing Tool designer, the user drags and drags to draw the vector graphics, then exports the JSON, registers to the HT to use all the HT components, note: Is all components, not only the topology, not only 3D , as well as all common components:

Http://www.hightopo.com/guide/guide/core/theme/examples/example_default.html

After all these years of front-end I still like the handwriting code, even if the vector description of the HT is most of the case I am handwriting, of course, the tool also has its role in the place, such as the following the use of HT vector water monitoring customers, The blades of this runner do not use tools to estimate the location coordinates of Bezier points that are difficult to write in handwritten code:

With the tools no longer have to worry about drawing curves, and even do not need to participate in the programmer, the artist can also use the HT vector Editor to draw graphics export JSON to the programmer, this is HT for the designer and developer to better fit each other vector design, Programmers do not have to work hard every day with code to draw a variety of devices, such a design and development workflow, even if the leader is not satisfied, the artist can quickly drag and drop the new vector graphics effect, and the programmer needs to do is just to import json.

Of course, HT as a programmer's development tool, just go to this step or is not enough, this only solves the work of drawing vector, for SCADA and other monitoring areas often need to be based on the background real-time data escalated hardware information, need graphics vector synchronization changes, so vector graphics color, size, All parameters, such as angles, may need to be consistent with real-time data, which is annoying and what is the best thing?

Traditionally, programmers are not only drawing vectors, but also doping business parameter logic in drawing code, so the readability and maintainability of the code is hard to imagine. Here HT and innovative proposed dynamic binding vector data function, HT vector format design from the bones of the head to consider the need for dynamic binding data, HT vector JSON format, any graphic element color, size, angle and other parameters can be dynamically bound business data, such as the fan blades of the pump, After the design of the artwork, we just have to bind the rotation angle of the blade to a property of data, the user only needs to set the angle to the property, the interface of the water pump fan blade automatically rotated, the same piechart rotation angle, and whether the hollow two parameters are bound to the business data , so that the user drags the elements and changes the corresponding business data entities when the double-click changes the rendering effect automatically:

The dynamic nature of the vector is also a use of dynamic skin, the traditional user needs to let the artist do different colors of the picture and CSS and other resources, users need remote dynamic download, and HT's skin can be changed completely locally, the entire process without server requests, and even customers can provide color pull bar, Let the user dynamically switch experience any color match.

Http://www.hightopo.com/guide/guide/core/theme/ht-theme-guide.html

Read here you should understand why to repeat the definition and implementation of vector the meaning of the wheel, it is only proposed Hightopo HT for Web to solve the problem of graphic design, a unique implementation mechanism for everyone to think about, radish cabbage each their own, This article is not to set off the DOM component and Cavnas of the 2D of the pros and cons of the controversy, SVG does have highcharts such a good application case, HT successfully implemented all the components using the canvas design, and Sencha and Kendoui and other popular general-purpose components are stacked in the DOM way is also a good development, so choose what kind of design is not decisive in many cases, the key or serious, as long as serious intentions to achieve can be in different design path to make wonderful.

Finally still accept win their hearts, in fact, vector is not so omnipotent, PS is very powerful, the artist can use PS to quickly build a variety of detailed effects of the picture, this has a simple vector format described in many cases is not up to, so the vector is only to solve some of the problems in the field of monitoring, reduce the programmer's part of the workload, HT has done a lot to solve these parts of the problem is enough!

Design of HTML5 topological graphic component for vectorization