Échantillon:
Moins non-sens, téléchargez simplement le code:
Arrow.js
/ ** * Implémentez la fonction des flèches de dessin entre deux points * @author [email protected] * @version 1.0 * @date 2013.05.23 * /; (fonction (fenêtre, document) {if (window.mapleque == undefined) window.mapleque = {}; if (window.mapleque.arrow! = Undefined) return; / ** * component exterface * / Varwe / ** * Recevoir des flèches d'objet Canvas et de dessiner ici (le point de départ et le point final de la flèche a été défini) * @param context * / peinture: function (context) {peinture (this, context);}, / ** * définir le point de démarrage et le point final de la flèche * @Param Sp Point de démarrage * @param ep point final * @param St Intensity * / set: function (sp, ep, st) {init (this, sp, st); * Définir l'apparence de la flèche * @param args * / setPara: fonction (args) {this.size = args.arrow_size; // flèche Taille this.sharp = args.arrow_sharp; // Arrow Sharp et Blunt}}; peinture = fonction (a, contexte) {var sp = a.sp; var ep = a.ep; context.moveto (Sp.x, Sp.Y); context.lineto (ep.x, ep.y); // dessine la tête de flèche var h = _Calch (a, sp, ep, contexte); context.moveto (ep.x, ep.y); context.lineto (H.H1.X, H.H1.Y); context.moveto (ep.x, ep.y); context.lineto (ep.x, ep.y); context.lineto (H.H2.x, H.H2.Y); context.stroke (); }; // Calculez la coordonnée de la tête var _calch = fonction (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 ch1 = {x: 0, y: 0}; var ch2 = {x: 0, y: 0}; var l = cep.y-csp.y; ch1.x = cep.x + l * (a.sharp || 0,025); ch1.y = cep.yl * (A.Size || 0,05); ch2.x = cep.xl * (a.sharp || 0,025); ch2.y = cep.yl * (A.Size || 0,05); var h1 = _scrollxoy (ch1, thêta); var h2 = _scrollxoy (ch2, thêta); return {H1: H1, H2: H2}; }; // coordonnées de rotation var _scrollxoy = fonction (p, theta) {return {x: px * math.cos (theta) + py * math.sin (theta), y: py * math.cos (theta) -px * math.sin (theta)}; }; var arrow = new function (); arrow.prototype = proc; window.mapleque.arrow = arrow;}) (fenêtre, document);
Arrow.html
<! Doctype html> <html> <éadf> <meta charset = "utf-8"> <tapie> Échantillon de l'arrow </ title> <script type = "text / javascrip Html5 </ canvas> <script type = "text / javascript"> var contenu = document.getElementById ("arrowline"). GetContext ('2d'); var a1 = new window.mapleque.arrow (); a1.set ({x: 350, y: 300}, {x: 200, y: 200}); a1. window.mapleque.arrow (); a2.set ({x: 100, y: 100}, {x: 200, y: 250}); a2.paint (cont); var a3 = new window.mapleque.arrow (); a3.set ({x: 100, y: 300}, {x: 150, y: 150}); a3.pain window.mapleque.arrow (); a4.set ({x: 350, y: 150}, {x: 150, y: 250}); a4.setPara ({arrow_size: 0.5, arrow_sharp: 0,5}) a4.paint (cont); </cript> </ body> </html>