首頁 > 其他

raphaeljs圖形庫學習筆記

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

官網地址：點我

<!doctype html><html dir="ltr" lang="zh-CN">  <head>    <meta charset="utf-8"/>    <meta http-equiv="X-UA-Compatible" content="IE=8">    <script src="http://bloghighlighter.googlecode.com/files/raphael-min.js" type="text/javascript" ></script>    <script type="text/javascript" charset="utf-8">      window.onload = function () {        var paper = Raphael("canvas", 640, 480);        paper.path({fill: "#000"},"M20,20L100,110z")      };    </script>    <title>直線</title>  </head>  <body>    <div id="canvas"></div>  </body></html>

<br /><!doctype html><br /><html dir="ltr" lang="zh-CN"><br /> <head><br /> <meta charset="utf-8"/><br /> <meta http-equiv="X-UA-Compatible" content="IE=8"><br /> <script src="http://bloghighlighter.googlecode.com/files/raphael-min.js" type="text/javascript" ></script><br /> <script type="text/javascript" charset="utf-8"><br /> window.onload = function () {<br /> var paper = Raphael("canvas", 640, 480);<br /> paper.path({fill: "#000"},"M20,20L100,110z")<br /> };<br /> </script><br /> <title>直線</title><br /> </head><br /> <body><br /> <div id="canvas"></div><br /> </body><br /></html><br />

運行代碼

<!doctype html><html dir="ltr" lang="zh-CN">  <head>    <meta charset="utf-8"/>    <meta http-equiv="X-UA-Compatible" content="IE=8">    <script src="http://bloghighlighter.googlecode.com/files/raphael-min.js" type="text/javascript" ></script>    <script type="text/javascript" charset="utf-8">      window.onload = function () {        var paper = Raphael("canvas", 640, 480);        var c = paper.circle(10, 10, 10).attr({fill: "#a9ea00", stroke: "none"}).animate({cx:100,cy:100,r: 20}, 2000)      };    </script>    <title>移動圓形</title>  </head>  <body>    <div id="canvas"></div>  </body></html>

animate 函數中的雜湊為變化後的圓的座標與半徑（radii）。

<br /><!doctype html><br /><html dir="ltr" lang="zh-CN"><br /> <head><br /> <meta charset="utf-8"/><br /> <meta http-equiv="X-UA-Compatible" content="IE=8"><br /> <script src="http://bloghighlighter.googlecode.com/files/raphael-min.js" type="text/javascript" ></script><br /> <script type="text/javascript" charset="utf-8"><br /> window.onload = function () {<br /> var paper = Raphael("canvas", 640, 480);<br /> var c = paper.circle(10, 10, 10).attr({fill: "#a9ea00", stroke: "none"}).animate({cx:100,cy:100,r: 20}, 2000)<br /> };<br /> </script><br /> <title>移動圓形</title><br /> </head><br /> <body><br /> <div id="canvas"></div><br /> </body><br /></html><br />

運行代碼

<!doctype html><html dir="ltr" lang="zh-CN">  <head>    <meta charset="utf-8"/>    <meta http-equiv="X-UA-Compatible" content="IE=8">    <script src="http://bloghighlighter.googlecode.com/files/raphael-min.js" type="text/javascript" ></script>    <script type="text/javascript" charset="utf-8">      window.onload = function () {        var paper = Raphael("canvas", 640, 480);        paper.rect(0, 0, 640, 480,10).attr({fill: "#F2F1D7",stroke: "none"});        paper.path({"fill":"#a9ea00","stroke":"#c9c"},"M300,200 h-150 a150,150 0 1,0 150,-150 z");      };    </script>    <title>扇形</title>  </head>  <body>    <div id="canvas"></div>  </body></html>

要點：h為水平延伸，後面跟著一個數值為延伸的距離，負數為向左，正數為向右。

我們再來看a的參數：rx ry x-axis-rotation large-arc-flag sweep-flag x y，相當於水平半徑，垂直半徑，是否以x軸旋轉，是否為大弧，是否順時針，最終x座標，最終y座標。

弧度(radians) = 角度(degrees) * Math.PI /180

角度(degrees) = 弧度(radians) * 180 / Math.PI

180 度大約等於 3.14…弧度。換句話講，半圓為 pi 個弧度，整圓為 2 pi 個弧度，一個弧度大概為 57.29…度。

large-arc-flag:true sweep-flag:true，大弧，順時針

<br /><!doctype html><br /><html dir="ltr" lang="zh-CN"><br /> <head><br /> <meta charset="utf-8"/><br /> <meta http-equiv="X-UA-Compatible" content="IE=8"><br /> <script src="http://bloghighlighter.googlecode.com/files/raphael-min.js" type="text/javascript" ></script><br /> <script type="text/javascript" charset="utf-8"><br /> window.onload = function () {<br /> var paper = Raphael("canvas", 640, 480);<br /> paper.rect(0, 0, 640, 480,10).attr({fill: "#F2F1D7",stroke: "none"});<br /> paper.path({"fill":"#a9ea00","stroke":"#c9c"},"M300,200 h-150 a150,150 0 1,1 150,-150 z");<br /> };<br /> </script><br /> <title>扇形</title><br /> </head><br /> <body><br /> <div id="canvas"></div><br /> </body><br /></html><br />

運行代碼

large-arc-flag:true sweep-flag:false，大弧，逆時針

<br /><!doctype html><br /><html dir="ltr" lang="zh-CN"><br /> <head><br /> <meta charset="utf-8"/><br /> <meta http-equiv="X-UA-Compatible" content="IE=8"><br /> <script src="http://bloghighlighter.googlecode.com/files/raphael-min.js" type="text/javascript" ></script><br /> <script type="text/javascript" charset="utf-8"><br /> window.onload = function () {<br /> var paper = Raphael("canvas", 640, 480);<br /> paper.rect(0, 0, 640, 480,10).attr({fill: "#F2F1D7",stroke: "none"});<br /> paper.path({"fill":"#a9ea00","stroke":"#c9c"},"M300,200 h-150 a150,150 0 1,0 150,-150 z");<br /> };<br /> </script><br /> <title>扇形</title><br /> </head><br /> <body><br /> <div id="canvas"></div><br /> </body><br /></html><br />

運行代碼

large-arc-flag:true sweep-flag:false，小弧，順時針

<br /><!doctype html><br /><html dir="ltr" lang="zh-CN"><br /> <head><br /> <meta charset="utf-8"/><br /> <meta http-equiv="X-UA-Compatible" content="IE=8"><br /> <script src="http://bloghighlighter.googlecode.com/files/raphael-min.js" type="text/javascript" ></script><br /> <script type="text/javascript" charset="utf-8"><br /> window.onload = function () {<br /> var paper = Raphael("canvas", 640, 480);<br /> paper.rect(0, 0, 640, 480,10).attr({fill: "#F2F1D7",stroke: "none"});<br /> paper.path({"fill":"#a9ea00","stroke":"#c9c"},"M300,200 h-150 a150,150 0 0,1 150,-150 z");<br /> };<br /> </script><br /> <title>扇形</title><br /> </head><br /> <body><br /> <div id="canvas"></div><br /> </body><br /></html><br />

運行代碼

large-arc-flag:false sweep-flag:false，小弧，逆時針

<br /><!doctype html><br /><html dir="ltr" lang="zh-CN"><br /> <head><br /> <meta charset="utf-8"/><br /> <meta http-equiv="X-UA-Compatible" content="IE=8"><br /> <script src="http://bloghighlighter.googlecode.com/files/raphael-min.js" type="text/javascript" ></script><br /> <script type="text/javascript" charset="utf-8"><br /> window.onload = function () {<br /> var paper = Raphael("canvas", 640, 480);<br /> paper.rect(0, 0, 640, 480,10).attr({fill: "#F2F1D7",stroke: "none"});<br /> paper.path({"fill":"#a9ea00","stroke":"#c9c"},"M300,200 h-150 a150,150 0 0,0 150,-150 z");<br /> };<br /> </script><br /> <title>扇形</title><br /> </head><br /> <body><br /> <div id="canvas"></div><br /> </body><br /></html><br />

運行代碼

畫出40%在圓中所佔的比例。

<br /><!doctype html><br /><html dir="ltr" lang="zh-CN"><br /> <head><br /> <meta charset="utf-8"/><br /> <meta http-equiv="X-UA-Compatible" content="IE=8"><br /> <script src="http://bloghighlighter.googlecode.com/files/raphael-min.js" type="text/javascript" ></script><br /> <script type="text/javascript" charset="utf-8"><br /> window.onload = function () {<br /> var paper = Raphael("holder", 700, 700);<br /> paper.rect(0, 0, 640, 480,10).attr({fill: "#F2F1D7",stroke: "none"});//設定畫板<br /> var angleplus = 360 * 40 / 100,//360度乘以40%<br /> angle = 0,<br /> startAngle = angle,<br /> endAngle =angle+angleplus,<br /> r = 200,<br /> cx = 300,<br /> cy = 300,<br /> rad = Math.PI / 180,<br /> x1 = cx + r * Math.cos(-startAngle * rad),<br /> x2 = cx + r * Math.cos(-endAngle * rad),//轉化為弧度，再然半徑，再加圓心的x座標，得出變化後x座標<br /> y1 = cy + r * Math.sin(-startAngle * rad),<br /> y2 = cy + r * Math.sin(-endAngle * rad);<br /> var path = ["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"]<br /> path = path.join(" ")<br /> paper.path({fill:"red"},path)<br /> };<br /> </script><br /> <title>畫出40%在圓中所佔的比例</title><br /> <style type="text/css" media="screen"><br /> #holder {<br /> width: 700px;<br /> height: 700px;<br /> }<br /> </style><br /> </head><br /> <body><br /> <p>畫出40%在圓中所佔的比例</p><br /> <div id="holder"></div><br /> </body><br /></html><br />

運行代碼

初級餅圖

<br /><!doctype html><br /><html dir="ltr" lang="zh-CN"><br /> <head><br /> <meta charset="utf-8"/><br /> <meta http-equiv="X-UA-Compatible" content="IE=8"><br /> <script src="http://bloghighlighter.googlecode.com/files/raphael-min.js" type="text/javascript" ></script><br /> <script type="text/javascript" charset="utf-8"><br /> window.onload = function () {<br /> var paper = Raphael("holder", 700, 700);<br /> paper.rect(0, 0, 640, 480,10).attr({fill: "#F2F1D7",stroke: "none"});//設定畫板<br /> /*<br /> *cx:圓心x座標<br /> *cy:圓心y座標<br /> *r:圓的半徑<br /> *oc:occupancy ，佔有率<br /> **/<br /> function drawSector(cx,cy,r,paper,oc,startAngle){<br /> var angleplus = 360 * oc / 100,//360度乘以40%<br /> startAngle = startAngle || 0,<br /> endAngle =startAngle+angleplus,<br /> rad = Math.PI / 180,<br /> x1 = cx + r * Math.cos(-startAngle * rad),<br /> x2 = cx + r * Math.cos(-endAngle * rad),<br /> y1 = cy + r * Math.sin(-startAngle * rad),<br /> y2 = cy + r * Math.sin(-endAngle * rad);<br /> var path = ["M", cx, cy, "L", x1, y1, "A", r, r, 0, +(endAngle - startAngle > 180), 0, x2, y2, "z"]<br /> path = path.join(" ")<br /> paper.path({fill:"red"},path);<br /> return endAngle<br /> }<br /> var ocs = [40,20,30,10];<br /> for(var i=0,l=ocs.length,startAngle;i<l;i++){<br /> startAngle = drawSector(300,300,100,paper,ocs[i],startAngle);<br /> }</p><p> };<br /> </script><br /> <style type="text/css" media="screen"><br /> #holder {<br /> width: 700px;<br /> height: 700px;<br /> }<br /> </style><br /> <title>初級餅圖</title><br /> </head><br /> <body></p><p> <p>初級餅圖</p><br /> <div id="holder"></div></p><p> </body><br /></html><br />

運行代碼

在javascript與flash的座標系中，角度是以順時針計算的，並以 0 度為起點
向正 X 軸引一條線，這就意味順時針旋轉角度為正角。逆時針就意味著為負角。

sin求出y軸的值，cos求出x軸的值。

  • lineTo：畫一條直線
  • cplineTo：畫一條三次方貝茲曲線（傳入三個參數）
  • curveTo：畫一條方貝茲路徑（二次或三次）
  • qcurveTo：畫一條二次方方貝茲路徑
  • arcTo：畫一個弧（參數：rx, ry, large_arc_flag, sweep_flag, x2, y2）

<br /><!doctype html><br /><html dir="ltr" lang="zh-CN"><br /> <head><br /> <meta charset="utf-8"/><br /> <meta http-equiv="X-UA-Compatible" content="IE=8"><br /> <script src="http://bloghighlighter.googlecode.com/files/raphael-min.js" type="text/javascript" ></script><br /> <script type="text/javascript" charset="utf-8"><br /> window.onload = function () {<br /> var paper = Raphael("holder", 800, 300);<br /> paper.rect(0, 0, 798, 298, 10).attr({fill:"#FBFBEA",stroke:"#000","stroke-width":"1px"});<br /> var circle = paper.circle(60, 60, 20).attr({fill:"#a9ea00",stroke:"#000","stroke-width":"1px"});<br /> circle.mouseover(function(){<br /> circle.attr({"r":40});<br /> });<br /> circle.mouseout(function(){<br /> circle.attr({"r":20});<br /> });<br /> };<br /> </script><br /> <title>事件</title><br /> </head><br /> <body></p><p> <p>事件</p><br /> <div id="holder"></div></p><p> </body><br /></html><br />

運行代碼

畫虛線要用stroke-dasharray屬性，同時不能共用stroke-width屬性。

<br /><!doctype html><br /><html dir="ltr" lang="zh-CN"><br /> <head><br /> <meta charset="utf-8"/><br /> <meta http-equiv="X-UA-Compatible" content="IE=8"><br /> <script src="http://bloghighlighter.googlecode.com/files/raphael-min.js" type="text/javascript" ></script><br /> <script type="text/javascript" charset="utf-8"><br /> window.onload = function () {<br /> var paper = Raphael("holder", 800, 400);<br /> paper.rect(0, 0, 798, 398, 10).attr({fill:"#EEFFEE",stroke:"#000","stroke-width":"1px"});<br /> var style = {fill:"#B3E2D5",stroke: "#666","stroke-dasharray":"- "}<br /> paper.circle(200, 200, 150).attr(style);//第一環<br /> paper.circle(200, 200, 110).attr(style);//第二環<br /> paper.circle(200, 200, 70).attr(style);//第三環<br /> paper.circle(200, 200, 30).attr(style);//第四環</p><p> var path = ["M", 200, 50, "L", 350, 200, "L", 200, 350, "L", 50, 200,"z"]<br /> path = path.join(" ")<br /> paper.path({fill:"red",opacity :0.7,stroke:"none"},path);<br /> //把Y當作高，X當作寬<br /> //我以200*200為圓心，半徑為150，那麼上右下左的座標應該為（200,50）,(350,200),(200,350),(50,200)<br /> };<br /> </script><br /> <title>事件</title><br /> </head><br /> <body></p><p> <p>事件</p><br /> <div id="holder"></div></p><p> </body><br /></html><br />

運行代碼

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More