Web Flowchart Drawing using Raphael

Lin Bingwen Evankaka original works. Reprint please specify the source Http://blog.csdn.net/evankaka

Abstract: This article to achieve a flow chart drawing, the ultimate goal is to achieve automatic drawing flowchart, and can be operated, directly click on the corresponding box on the flowchart can let the background run the corresponding program.

first, plug-in introduction

1. Graphic drawing Raphael

Where graphics are drawn using raphael,:http://raphaeljs.com, it's very powerful.

Chinese Help Tutorial: Http://html5css3webapp.com/raphaelApi.htm#Paper.text

Some of these demos are as follows:

2. The right mouse button menu bar pops up Smartmenu

Tutorials and: http://www.cnblogs.com/ATree/archive/2011/06/30/jQuery-smartMenu-javascript.html

3, Font size change tool plugin Jquery.fontflex

As the page zooms in or out, the font also zooms in and out as you zoom in or out. Of course, you can set a maximum value, an intermediate value, and a minimum value. This effect is mostly applied to responsive pages, or in pages where multiple versions of the terminal browser are required

Second, use

1. First, take a look at the flowchart you want to implement.

2. Code implementation

Here is in fact the above plug-ins are quoted, and then the other is to use JS constantly draw ellipses, straight arrows, boxes and so on.

After painting, add text, add right click event to box

<! DOCTYPE html>
The final effect shows:


Right-click:

Result after method invocation:

 
Copyright NOTICE: This article for Bo Master Lin Bingwen Evankaka original article, reproduced please indicate the source Http://blog.csdn.net/evankaka
 
Web Flowchart Drawing using Raphael