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

出自六年制學程
跳轉到: 導覽搜尋
示例
示例
第 105 行: 第 105 行:
 
#[http://jendo.org/SVG/demo0.php 直角座標系]
 
#[http://jendo.org/SVG/demo0.php 直角座標系]
 
#[http://jendo.org/SVG/demo1.php 向量,箭頭]
 
#[http://jendo.org/SVG/demo1.php 向量,箭頭]
#[http://jendo.org/SVG/demo2.php 拋物線,橢圓,弧]
+
#[http://jendo.org/SVG/demo2.php 拋物線,橢圓,弧,箭頭]
 
#[http://jendo.org/SVG/demo3.php 四層結構,虛線]
 
#[http://jendo.org/SVG/demo3.php 四層結構,虛線]
 
#[http://jendo.org/SVG/demo4.php 函數描點,以sin,cos為例]
 
#[http://jendo.org/SVG/demo4.php 函數描點,以sin,cos為例]

2018年8月27日 (一) 00:02的修訂版本

jendo.org/SVG/svgdraw.php

將陣列化為子串

功能

  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. cores(畫核心圓):
  2. rects(畫矩形,可帶多行字):
  3. hexagons(書六角框,可帶字,固定高度為48px):
  4. polygons(畫多邊形):取每一個 polygon 的 points,rotate 索引的元素值,配合 style 函式可用的諸索引值。
  5. lineSegments(線段):取每一個 lineSegment 的註標索引二維陣列(決定兩點),配合 style 函式可用的諸索引值。
  6. circles(畫圓)(圓心為直角座標,半徑單位為點數):為了確保 xu≠yu 時圓不會變形,所以半俓應取點數。取每一個 circle 的註標索引0之兩元素陣列決定圓心,radius決定半徑,配合 style 函式可用的諸索引值。
  7. ellipses(畫橢圓)(中心、x軸半長、y軸半長皆為直角座標):取每一個 ellipse 的註標索引0之兩元素陣列決定中心,rx,ry索引的元素值決定兩軸,配合 style 函式可用的諸索引值。
  8. arcs(橢圓弧)(中心、x軸半長、y軸半長皆為直角座標):取每一個 arc 的註標索引二維陣列決定弧的起點與終點,rx,ry索引的元素值決定兩軸,xRotation,大或小弧,順時針決定弧的形狀,配合 style 函式可用的諸索引值。
  9. 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. 多個多項式圖形計算機,可輸入值