Javascript draw arrow widget based on HTML5canvas _ javascript skills

Source: Internet
Author: User
This component allows you to draw arrows Based on the coordinate at the start and end of arrows. Currently, you can set the arrow shape (size and angle) for the widget ). Example:

Put the following code directly:

Arrow. js

/*** Implement the function of drawing arrows between two points * @ author mapleque@163.com * @ version 1.0 * @ date 2013.05.23 */; (function (window, document) {if (window. mapleque = undefined) window. mapleque ={}; if (window. mapleque. arrow! = Undefined) return;/*** external interface of the component */var proc = {/*** receives the canvas object and draws an arrow on it (the start and end points of the arrow have been set) * @ param context */paint: function (context) {paint (this, context );}, /*** set the start and end points of the arrow * @ param sp Start Point * @ param ep end point * @ param st intensity */set: function (sp, ep, st) {init (this, sp, ep, st) ;},/*** set arrow appearance ** @ param args */setPara: function (args) {this. size = args. arrow_size; // the size of the arrow. this. sharp = args. arrow_sharp; // arrow acute blunt }}; var init = function (a, sp, ep, st) {. sp = sp; // start point. ep = ep; // end. st = st; // strength}; var paint = function (a, context) {var sp =. sp; var ep =. ep; if (context = undefined) return; // draw the main arrow context. beginPath (); context. moveTo (sp. x, sp. y); context. lineTo (ep. x, ep. y); // draw the arrow header var h = _ calcH (a, sp, ep, context); context. moveTo (ep. x, ep. y); context. lineTo (h. h1.x, h. h1.y); context. moveTo (ep. x, ep. y); context. lineTo (h. h2.x, h. h2.y); context. stroke () ;}; // calculates the head coordinate var _ calcH = function (a, sp, ep, context) {var theta = Math. atan (ep. x-sp.x)/(ep. y-sp.y); var cep = _ scrollXOY (ep,-theta); var csp = _ scrollXOY (sp,-theta); var values = {x: 0, y: 0}; var ch2 = {x: 0, y: 0}; var l = cep. y-csp.y; ch1.x = cep. x + l * (. fast | 0.025); ch1.y = cep. y-l * (. size | 0.05); ch2.x = cep. x-l * (. fast | 0.025); ch2.y = cep. y-l * (. size | 0.05); var h1 = _ scrollXOY (values, theta); var h2 = _ scrollXOY (ch2, theta); return {h1: h1, h2: h2 };}; // rotating coordinate var _ scrollXOY = function (p, theta) {return {x: p. x * Math. cos (theta) + p. y * Math. sin (theta), y: p. y * Math. cos (theta)-p. x * Math. sin (theta) };}; var arrow = new Function (); arrow. prototype = proc; window. mapleque. arrow = arrow;}) (window, document );

Arrow.html

 Sample of the arrow

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.