PHP繪圖類別：修訂版本之間的差異

出自六年制學程
跳轉到： 導覽、 搜尋
（→‎功能）
 
（未顯示同用戶所作出之46次版本）
第 1 行： 第 1 行：
 
[[分類:SVG]]
 
[[分類:SVG]]
−
home.jendo.org/SVG/svgdraw.php
+
jendo.org/SVG/svgdraw.php
 +
 
 +
將陣列化為子串
 +
 
 +
 
 +
待修改處：「// 畫函式」當中
 +
:排除非逐點代值的函式：stdcircle,value2point,國中行政
 +
::多項式畫 polyline 和 parabola (拋物線)
 +
::else：用 circle 描點 => 此處未來將改成 polyline
 
===功能===
 
===功能===
 
#畫直角座標系：性質coordinate為真
 
#畫直角座標系：性質coordinate為真
第 7 行： 第 15 行：
 
##畫一次方程式：函式名drawLine
 
##畫一次方程式：函式名drawLine
 
##畫拋物線：函式名parabola
 
##畫拋物線：函式名parabola
 +
##畫多項式：函式名polynomialEquation
 +
##畫正弦：函式名sinValue
 +
##畫餘弦：函式名cosValue
 
##畫借錢投資：函式名borrowMoneyToInvest
 
##畫借錢投資：函式名borrowMoneyToInvest
−
##畫描點成線：函式名value2point
+
##畫連點成線：函式名value2point
 
##畫標準圓：函式名stdcircle
 
##畫標準圓：函式名stdcircle
−
##畫2016年之前的國中行政員額：函式名國中行政
+
##畫2016年之前的國中行政員額：函式名「國中行政」，畫左右無限延伸之折線
 +
#畫核心圓(含字)：性質cores
 +
#畫矩形(含字)：性質rects
 +
#畫六角框(含字)：性質hexagons<br/>-----單一標籤圖形-----
 
#畫多邊形：性質polygons
 
#畫多邊形：性質polygons
−
#畫字：性質alnums
+
#畫線段：性質lineSegments
−
#畫圓(圓心為直角座標，半徑為SVG座標)：性質circles
+
#畫圓(圓心為直角座標，半徑為SVG長度)：性質circles，其實是畫點，不受xu,yu不等影響。
 
#畫橢圓(中心、x軸半長、y軸半長皆為直角座標)：性質ellipses
 
#畫橢圓(中心、x軸半長、y軸半長皆為直角座標)：性質ellipses
 
#畫橢圓弧(中心、x軸半長、y軸半長皆為直角座標)：性質arcs
 
#畫橢圓弧(中心、x軸半長、y軸半長皆為直角座標)：性質arcs
 +
#畫字：性質alnums
 +
#加前綴與後綴：性質extraPrefix與extraSuffix
  
 
===基本方法===
 
===基本方法===
 +
#style(陣列)：用陣例的字串索引，決定著色(fill)、不透明度(fill-opacity)、框線(color,width,dash)、箭頭(arrowStart,arrowEnd)
 +
#xc2p：直角座標轉 SVG 座標
 +
#yc2p：直角座標轉 SVG 座標
 
#getDecimals：取一數的小數部分或小數位數
 
#getDecimals：取一數的小數部分或小數位數
 
#getPureNumber：取一數的整數部分
 
#getPureNumber：取一數的整數部分
 +
#words(陣列,寬,高,左下位置x,左緣位置y,列距,對齊)：畫字
 +
 +
===零次物件===
 +
基本特性：
 +
#使用 SVG 座標系。
 +
#使用標籤繪圖。
 +
#將字串加入 $this->extraPrefix 或 $this->extraSuffix 。
 +
物件列表：
 +
#line(直線)，屬性有x1(第一點x座標)y1(第一點y座標)x2(第二點x座標)y2(第二點y座標)。
 +
#polyline(多點成線)，諸屬性如下：
 +
#*points：多點，點與點用空白間開，同一點 x y 座標以逗點間開。
 +
#polygon(多邊形)，也可以取五點畫出一個星形。諸屬性如下：
 +
#*points：多點，點與點用空白間開，同一點 x y 座標以逗點間開。
 +
#circle(圓)，諸屬性如下：
 +
#*cx(圓心x座標)，cy(圓心y座標)，r(半徑)
 +
#rect(矩形)，諸屬性如下：
 +
#*width(寬)，height(高)，省略起點則以原點為起點，x(起點x座標)，y(起點y座標)，rx(圓角x半徑)，ry(圓角y半徑)
 +
#ellipse(橢圓)，諸屬性如下：
 +
#*cx(中心x座標)，cy(中心x座標)，rx(x軸半長)，ry(y軸半長)。
 +
#path
 +
#*線
 +
#*二次貝茲曲線
 +
#*三次具茲曲線
 +
#*橢圓弧
 +
#text(文字)
 +
#image(圖)
 +
#foreignobject(外部物件)
 +
 +
===一次物件===
 +
基本特性：
 +
#畫出一系列多個同類標籤或標籤群。
 +
#性質為陣列，用 foreach 一一取出元素，每一元素也是陣列，指示畫出一個標籤或一組標籤群。
 +
#除了圓的大小、字的尺寸、行距、圓角的半徑、六角框的邊長、limb長用點為單位之外，其他導入的位置與長度單位均為直角座標尺度，會在實體化過程中轉成 SVG 單位。
 +
物件列表：
 +
#chronologies(畫諸年表)：
 +
#*必要元素：事件。如：「$某年表['event'][]=array('coord'=>幾分之幾,'name'=>時點名,'note'=>事件描述);」。所有的共用參數都可以各別調整。
 +
#*必要元素：時期。如：「$某年表['period'][]=array('start'=>幾分之幾,'end'=>幾分之幾,'name'=>'時期名');」。可以調整線的粗細(width)、顏色(color)、有無箭頭('arrow)，字的大小(period-font-size)、顏色(period-color)、字體(period-font-family)，以及字與軸的距離(period-ry)。但字與線的間距(period-padding)只能整體設定，不能各別調整。
 +
#*選用元素：
 +
#*#$某年表['position']='down';標題在下
 +
#*#$某年表['title']=標題;
 +
#*#$某年表['axis-lenght']=軸長(直角座標);
 +
#*#$某年表['axis-width']=軸粗細;
 +
#*#$某年表['axis-start'][0]=軸起點(直角座標);
 +
#*#$某年表['axis-start'][1]=軸起點(直角座標);
 +
#*#$某年表['axis-color']=軸設色;
 +
#*#$某年表['scale-lenght']=刻度長(直角座標);
 +
#*#$某年表['scale-width']=刻度粗細;
 +
#*#$某年表['scale-color']=刻度設色;
 +
#*#$某年表['scale-only-up']=刻度只畫軸以上;
 +
#*#$某年表['scale-only-down']=刻度只畫軸以下;
 +
#*#$某年表['scale-none']=不畫刻度(只顯示字);
 +
#*#$某年表['title-color']=標題設色;
 +
#*#$某年表['title-font-size']=標題字大小;
 +
#*#$某年表['title-font-family']=標題字體;
 +
#*#$某年表['title-padding']=標題與年表距離;
 +
#*#$某年表['name-color']=時點設色;
 +
#*#$某年表['name-font-size']=時點字大小;
 +
#*#$某年表['name-font-family']=時點字體;
 +
#*#$某年表['name-padding']=時點與刻度距離;
 +
#*#$某年表['note-color']=描述設色;
 +
#*#$某年表['note-font-size']=描述字大小;
 +
#*#$某年表['note-font-family']=描述字體;
 +
#*#$某年表['note-padding']=描述與刻度距離;
 +
#*#$某年表['note-rotate']=描述與軸夾角;
 +
#*#$某年表['period-color']=時期「字」預設顏色
 +
#*#$某年表['period-font-size']=時期「字」預設大小
 +
#*#$某年表['period-font-family']=時期「字」預設字體
 +
#*#$某年表['period-ry']=時期「線」預設高度
 +
#*#$某年表['period-stroke-width']=時期「線」預設粗細
 +
#*#$某年表['period-stroke-color']=時期「線」預設顏色
 +
#*#$某年表['period-stroke-arrow']=時期「線」預設有無箭頭
 +
#*#$某年表['period-padding']==時期「字」與「線」間距
 +
#cores(畫核心圓)：
 +
#rects(畫矩形,可帶多行字)：
 +
#hexagons(書六角框,可帶字,固定高度為48px)：
 +
#polygons(畫多邊形)：取每一個 polygon 的 points,rotate 索引的元素值，配合 style 函式可用的諸索引值。
 +
#lineSegments(線段)：取每一個 lineSegment 的註標索引二維陣列(決定兩點)，配合 style 函式可用的諸索引值。
 +
#circles(畫圓)(圓心為直角座標，半徑單位為點數)：為了確保 xu≠yu 時圓不會變形，所以半俓應取點數。取每一個 circle 的註標索引0之兩元素陣列決定圓心，radius決定半徑，配合 style 函式可用的諸索引值。
 +
#ellipses(畫橢圓)(中心、x軸半長、y軸半長皆為直角座標)：取每一個 ellipse 的註標索引0之兩元素陣列決定中心，rx,ry索引的元素值決定兩軸，配合 style 函式可用的諸索引值。
 +
#arcs(橢圓弧)(起終點、x軸半長、y軸半長皆為直角座標)：取每一個 arc 的註標索引二維陣列決定弧的起點與終點，rx,ry索引的元素值決定兩軸，xRotation,大或小弧,順時針決定弧的形狀，配合 style 函式可用的諸索引值。
 +
#alnums(畫字)：取每一個 alnum ，其註標索引0之兩元素陣列決定字串的左下點位置，word索引決定內容，color,size,decoration,font-style索引決定外觀。須放在一次物件的最後，讓前面各一次物件可以使用。
 +
 +
===二次物件===
 +
基本特性：
 +
#用函式結合多種一次物件，由於一次物件已改為直角座標系，所以不受 SVG 座標系的影響。
 +
#由於函式的實體化是在諸一次物件之前，所以可以引用一次物件，然後在稍後的程式段落，將一次物件逐一實體化。
 +
物件列表：
 +
*逐點代值：
 +
*#三次以上多項式
 +
*#sinValue
 +
*#cosValue
 +
*#借錢投資(borrowMoneyToInvest)
 +
*非逐點代值
 +
*#零次多項式：水平線
 +
*#一次多項式：兩間取線段或drawLine
 +
*#二次多項式：parabola
 +
*#一次方程式(drawLine)：傳入斜率,常數項係數、style，得到向兩側延伸的線。
 +
*#拋物線(parabola)：傳入二次項,一次項,常數係數、style、左側端點、右側端點，得到有端點或向左右側延伸的橢圓。
 +
*#標準圓(stdcircle)：傳入角度，畫出橘色標準圓、黑色半徑、藍色sin截距、紅色cos截距、虛線cos投影等五個一次物件。
 +
*#value2point(連點成線)：傳入一個陣列，各元素：索引為x、元素值為y，連點成線得到 polyline 。如擲骰子得大數法則、國中班級分布。加上左側延伸與右側延伸，就可以將「國中行政」併入。
 +
*#國中行政：以(46,19.7)為折點的左右兩個線段，兩側均延伸到圖的邊緣。應整合到「連點成線」。
 +
===配色===
 +
#fill:#FBB03B土黃;stroke:#880015深咖啡;
 +
#fill:#EAD2F9淡紫;stroke:#662D91紫;
 +
#fill:#FFAECC玫瑰;stroke:#ED1C24紅;
 +
#fill:#F4F482鵝黃;stroke:#006837綠;
 +
#fill:#92F4F1淺藍;stroke:#0000FF藍;
 +
===示例===
 +
#[http://jendo.org/SVG/demo0.php 直角座標系]
 +
#[http://jendo.org/SVG/demo1.php 向量,箭頭]
 +
#[http://jendo.org/SVG/demo2.php 拋物線,橢圓,弧,箭頭]
 +
#[http://jendo.org/SVG/demo3.php 四層結構,虛線]
 +
#[http://jendo.org/SVG/demo4.php 函數描點,以sin,cos為例]
 +
#[http://jendo.org/SVG/demo5.php 借錢投資]
 +
#[http://jendo.org/SVG/lawOfLargeNumbers.php 大數法則]
 +
#[http://jendo.org/SVG/OSSACC.php 圖示,以OSSACC為例]
 +
#[http://jendo.org/SVG/urclassNetStep1.php 圖示,以跨校選修聯盟為例]
 +
#[http://jendo.org/SVG/位移速度加速度.php 位移速度加速度]
 +
#[http://jendo.org/SVG/Incircle.php 三角形的內心]
 +
#[http://jendo.org/SVG/inner.php 三角形的重心]
 +
#[http://jendo.org/SVG/TriangularCoordinates.php 三角形的頂點座標]
 +
#[http://jendo.org/SVG/midpointCoordinates.php 中點原理]
 +
#[http://jendo.org/SVG/stdcircle60deg.php 畫標準圓及sin60°、cos60°]
 +
#[http://jendo.org/SVG/stdcircle75deg.php 畫標準圓及sin75°、cos75°]
 +
#[http://jendo.org/SVG/stdcircleIn.php 畫標準圓及sin、cos，可輸入值]
 +
#[http://jendo.org/SVG/sincos.php sin、cos之值，單位° ]
 +
#[http://jendo.org/SVG/sincosIn.php sin、cos之值，單位°，可輸入值 ]
 +
#[http://jendo.org/SVG/sinA-B.php sin(A-B)圖解]
 +
#[http://jendo.org/SVG/sinA+B.php sin(A+B)圖解]
 +
#[http://jendo.org/SVG/一次多項式圖解.php 一次多項式圖解]
 +
#[http://jendo.org/SVG/index.php 畫二元一次聯立方程式，可輸入值 ]
 +
#[http://jendo.org/SVG/cubicEquationIn.php 多項式圖形計算機，展現多段切線斜率，可輸入值 ]
 +
#[http://jendo.org/SVG/polynomialEquationIn.php 多個多項式圖形計算機，可輸入值]

2021年12月5日 (日) 20:27的最新修訂版本

jendo.org/SVG/svgdraw.php

將陣列化為子串


待修改處：「// 畫函式」當中

排除非逐點代值的函式：stdcircle,value2point,國中行政
多項式畫 polyline 和 parabola (拋物線)
else：用 circle 描點 => 此處未來將改成 polyline

功能

  1. 畫直角座標系：性質coordinate為真
    • 畫方格紙：性質squareLattice為真
  2. 畫函式：性質functions
    1. 畫一次方程式：函式名drawLine
    2. 畫拋物線：函式名parabola
    3. 畫多項式：函式名polynomialEquation
    4. 畫正弦：函式名sinValue
    5. 畫餘弦：函式名cosValue
    6. 畫借錢投資：函式名borrowMoneyToInvest
    7. 畫連點成線：函式名value2point
    8. 畫標準圓：函式名stdcircle
    9. 畫2016年之前的國中行政員額：函式名「國中行政」，畫左右無限延伸之折線
  3. 畫核心圓(含字)：性質cores
  4. 畫矩形(含字)：性質rects
  5. 畫六角框(含字)：性質hexagons
    -----單一標籤圖形-----
  6. 畫多邊形：性質polygons
  7. 畫線段：性質lineSegments
  8. 畫圓(圓心為直角座標，半徑為SVG長度)：性質circles，其實是畫點，不受xu,yu不等影響。
  9. 畫橢圓(中心、x軸半長、y軸半長皆為直角座標)：性質ellipses
  10. 畫橢圓弧(中心、x軸半長、y軸半長皆為直角座標)：性質arcs
  11. 畫字：性質alnums
  12. 加前綴與後綴：性質extraPrefix與extraSuffix

基本方法

  1. style(陣列)：用陣例的字串索引，決定著色(fill)、不透明度(fill-opacity)、框線(color,width,dash)、箭頭(arrowStart,arrowEnd)
  2. xc2p：直角座標轉 SVG 座標
  3. yc2p：直角座標轉 SVG 座標
  4. getDecimals：取一數的小數部分或小數位數
  5. getPureNumber：取一數的整數部分
  6. words(陣列,寬,高,左下位置x,左緣位置y,列距,對齊)：畫字

零次物件

基本特性：

  1. 使用 SVG 座標系。
  2. 使用標籤繪圖。
  3. 將字串加入 $this->extraPrefix 或 $this->extraSuffix 。

物件列表：

  1. line(直線)，屬性有x1(第一點x座標)y1(第一點y座標)x2(第二點x座標)y2(第二點y座標)。
  2. polyline(多點成線)，諸屬性如下：
    • points：多點，點與點用空白間開，同一點 x y 座標以逗點間開。
  3. polygon(多邊形)，也可以取五點畫出一個星形。諸屬性如下：
    • points：多點，點與點用空白間開，同一點 x y 座標以逗點間開。
  4. circle(圓)，諸屬性如下：
    • cx(圓心x座標)，cy(圓心y座標)，r(半徑)
  5. rect(矩形)，諸屬性如下：
    • width(寬)，height(高)，省略起點則以原點為起點，x(起點x座標)，y(起點y座標)，rx(圓角x半徑)，ry(圓角y半徑)
  6. ellipse(橢圓)，諸屬性如下：
    • cx(中心x座標)，cy(中心x座標)，rx(x軸半長)，ry(y軸半長)。
  7. path
    • 線
    • 二次貝茲曲線
    • 三次具茲曲線
    • 橢圓弧
  8. text(文字)
  9. image(圖)
  10. foreignobject(外部物件)

一次物件

基本特性：

  1. 畫出一系列多個同類標籤或標籤群。
  2. 性質為陣列，用 foreach 一一取出元素，每一元素也是陣列，指示畫出一個標籤或一組標籤群。
  3. 除了圓的大小、字的尺寸、行距、圓角的半徑、六角框的邊長、limb長用點為單位之外，其他導入的位置與長度單位均為直角座標尺度，會在實體化過程中轉成 SVG 單位。

物件列表：

  1. chronologies(畫諸年表)：
    • 必要元素：事件。如：「$某年表['event'][]=array('coord'=>幾分之幾,'name'=>時點名,'note'=>事件描述);」。所有的共用參數都可以各別調整。
    • 必要元素：時期。如：「$某年表['period'][]=array('start'=>幾分之幾,'end'=>幾分之幾,'name'=>'時期名');」。可以調整線的粗細(width)、顏色(color)、有無箭頭('arrow)，字的大小(period-font-size)、顏色(period-color)、字體(period-font-family)，以及字與軸的距離(period-ry)。但字與線的間距(period-padding)只能整體設定，不能各別調整。
    • 選用元素：
      1. $某年表['position']='down';標題在下
      2. $某年表['title']=標題;
      3. $某年表['axis-lenght']=軸長(直角座標);
      4. $某年表['axis-width']=軸粗細;
      5. $某年表['axis-start'][0]=軸起點(直角座標);
      6. $某年表['axis-start'][1]=軸起點(直角座標);
      7. $某年表['axis-color']=軸設色;
      8. $某年表['scale-lenght']=刻度長(直角座標);
      9. $某年表['scale-width']=刻度粗細;
      10. $某年表['scale-color']=刻度設色;
      11. $某年表['scale-only-up']=刻度只畫軸以上;
      12. $某年表['scale-only-down']=刻度只畫軸以下;
      13. $某年表['scale-none']=不畫刻度(只顯示字);
      14. $某年表['title-color']=標題設色;
      15. $某年表['title-font-size']=標題字大小;
      16. $某年表['title-font-family']=標題字體;
      17. $某年表['title-padding']=標題與年表距離;
      18. $某年表['name-color']=時點設色;
      19. $某年表['name-font-size']=時點字大小;
      20. $某年表['name-font-family']=時點字體;
      21. $某年表['name-padding']=時點與刻度距離;
      22. $某年表['note-color']=描述設色;
      23. $某年表['note-font-size']=描述字大小;
      24. $某年表['note-font-family']=描述字體;
      25. $某年表['note-padding']=描述與刻度距離;
      26. $某年表['note-rotate']=描述與軸夾角;
      27. $某年表['period-color']=時期「字」預設顏色
      28. $某年表['period-font-size']=時期「字」預設大小
      29. $某年表['period-font-family']=時期「字」預設字體
      30. $某年表['period-ry']=時期「線」預設高度
      31. $某年表['period-stroke-width']=時期「線」預設粗細
      32. $某年表['period-stroke-color']=時期「線」預設顏色
      33. $某年表['period-stroke-arrow']=時期「線」預設有無箭頭
      34. $某年表['period-padding']==時期「字」與「線」間距
  2. cores(畫核心圓)：
  3. rects(畫矩形,可帶多行字)：
  4. hexagons(書六角框,可帶字,固定高度為48px)：
  5. polygons(畫多邊形)：取每一個 polygon 的 points,rotate 索引的元素值，配合 style 函式可用的諸索引值。
  6. lineSegments(線段)：取每一個 lineSegment 的註標索引二維陣列(決定兩點)，配合 style 函式可用的諸索引值。
  7. circles(畫圓)(圓心為直角座標，半徑單位為點數)：為了確保 xu≠yu 時圓不會變形，所以半俓應取點數。取每一個 circle 的註標索引0之兩元素陣列決定圓心，radius決定半徑，配合 style 函式可用的諸索引值。
  8. ellipses(畫橢圓)(中心、x軸半長、y軸半長皆為直角座標)：取每一個 ellipse 的註標索引0之兩元素陣列決定中心，rx,ry索引的元素值決定兩軸，配合 style 函式可用的諸索引值。
  9. arcs(橢圓弧)(起終點、x軸半長、y軸半長皆為直角座標)：取每一個 arc 的註標索引二維陣列決定弧的起點與終點，rx,ry索引的元素值決定兩軸，xRotation,大或小弧,順時針決定弧的形狀，配合 style 函式可用的諸索引值。
  10. alnums(畫字)：取每一個 alnum ，其註標索引0之兩元素陣列決定字串的左下點位置，word索引決定內容，color,size,decoration,font-style索引決定外觀。須放在一次物件的最後，讓前面各一次物件可以使用。

二次物件

基本特性：

  1. 用函式結合多種一次物件，由於一次物件已改為直角座標系，所以不受 SVG 座標系的影響。
  2. 由於函式的實體化是在諸一次物件之前，所以可以引用一次物件，然後在稍後的程式段落，將一次物件逐一實體化。

物件列表：

  • 逐點代值：
    1. 三次以上多項式
    2. sinValue
    3. cosValue
    4. 借錢投資(borrowMoneyToInvest)
  • 非逐點代值
    1. 零次多項式：水平線
    2. 一次多項式：兩間取線段或drawLine
    3. 二次多項式：parabola
    4. 一次方程式(drawLine)：傳入斜率,常數項係數、style，得到向兩側延伸的線。
    5. 拋物線(parabola)：傳入二次項,一次項,常數係數、style、左側端點、右側端點，得到有端點或向左右側延伸的橢圓。
    6. 標準圓(stdcircle)：傳入角度，畫出橘色標準圓、黑色半徑、藍色sin截距、紅色cos截距、虛線cos投影等五個一次物件。
    7. value2point(連點成線)：傳入一個陣列，各元素：索引為x、元素值為y，連點成線得到 polyline 。如擲骰子得大數法則、國中班級分布。加上左側延伸與右側延伸，就可以將「國中行政」併入。
    8. 國中行政：以(46,19.7)為折點的左右兩個線段，兩側均延伸到圖的邊緣。應整合到「連點成線」。

配色

  1. fill:#FBB03B土黃;stroke:#880015深咖啡;
  2. fill:#EAD2F9淡紫;stroke:#662D91紫;
  3. fill:#FFAECC玫瑰;stroke:#ED1C24紅;
  4. fill:#F4F482鵝黃;stroke:#006837綠;
  5. fill:#92F4F1淺藍;stroke:#0000FF藍;

示例

  1. 直角座標系
  2. 向量,箭頭
  3. 拋物線,橢圓,弧,箭頭
  4. 四層結構,虛線
  5. 函數描點,以sin,cos為例
  6. 借錢投資
  7. 大數法則
  8. 圖示,以OSSACC為例
  9. 圖示,以跨校選修聯盟為例
  10. 位移速度加速度
  11. 三角形的內心
  12. 三角形的重心
  13. 三角形的頂點座標
  14. 中點原理
  15. 畫標準圓及sin60°、cos60°
  16. 畫標準圓及sin75°、cos75°
  17. 畫標準圓及sin、cos，可輸入值
  18. sin、cos之值，單位°
  19. sin、cos之值，單位°，可輸入值
  20. sin(A-B)圖解
  21. sin(A+B)圖解
  22. 一次多項式圖解
  23. 畫二元一次聯立方程式，可輸入值
  24. 多項式圖形計算機，展現多段切線斜率，可輸入值
  25. 多個多項式圖形計算機，可輸入值
取自「http://well-being-ng.net/wiki1231/index.php?title=PHP繪圖類別&oldid=56412」