canvas--Web page drawing component based on SVG encapsulation (not finished)

Source: Internet
Author: User

Note: The source code has been placed on GitHub, the address is: https://github.com/Wellla/canvas.git, need to use the classmate to download (oneself lazy, did not do mesh)

Foreword: Canvas, yes, this name and Daming dingding HTML5 's Canvas name, because there are no more names have such image, the component is also on the basis of Raphael "object-oriented" package, this component is the first month I came to write out of the company, But because at that time wrote out to the front-end colleague maintenance, also has no time to tube, today has time to have not completed the plane triangle coordinate system model and external wiring algorithm to finish, intends to share to everyone, one is the spirit of open source, we learn progress together, and the second is to use the text to write their own in the whole component of the Abstract "The use of thought, can put their own ideas to complete a full expression of their own is a progress! The wrong place, I hope you point out;

Not much nonsense to say, first introduce the main function of this component, can draw topology diagram, flowchart, diagram, etc., attached below:

  



Next, describe the composition of several components:
Canvas: Managing Objects with canvases
Container: Container (Core package)
Line: Connect
Tiny: Thumbnail Plugin
Edit: Editor Plugin
Util: Algorithm of triangular coordinate system model Atan, linear line algorithm link, rotatable arrows arrow, polyline Pathz, Bézier curve paths

Canvas: For the manager of elements throughout the canvas, to provide external creation of containers, lines, serialization, deserialization, create a memo, delete elements and other methods, and as a global object to have all elements of the canvas access control permissions
Container: is based on the concept of "group" packaging, groups can contain text, pictures, vectors, line objects, etc., the elements of the group in a relative position in the group, while "group" is an abstract object, is a theoretical area restrictions, including processor handler, boundary Bbox and other abstract attributes, As a result, a group can also be a child of a group. Group externally provides methods to add elements, delete, serialize, drag, etc. to a group
Line: The connection is the container component relationship, each line object has both ends of the object, and provides delete, serialization, drag, animation and other methods, lines type can be obtained from the Util
Tiny: The use of plug-ins and canvas separation, through the viewport changes to the canvas of the projection and control
EDIT: Integrated into the canvas using plug-ins, an editor corresponding to an editing rule, you can use a variety of editors in the canvas to switch, mainly for container editing, because of the use of plug-ins, the editor is attached to the container, so greatly saving memory overhead
Util: Algorithm tool class, mainly includes building web page triangle Cartesian coordinate system, wire algorithm, rotation algorithm, line algorithm

There are also problems: the use of group elements, the more abstract abstraction that provides methods externally and reclaims property access rights ...

canvas--Web page drawing component based on SVG encapsulation (not finished)

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.