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

出自六年制學程
跳轉到: 導覽搜尋
配色
示例
第 107 行: 第 107 行:
 
#[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/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/midpointCoordinates.php 中點原理]
 +
#[http://jendo.org/SVG/stdcircle60deg.php 畫標準圓及sin、cos]
 +
#[http://jendo.org/SVG/stdcircle75deg.php 畫標準圓及sin、cos]
 +
#[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 多個多項式圖形計算機,可輸入值]

2018年8月26日 (日) 23:34的修訂版本

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. 畫標準圓及sin、cos
  15. 畫標準圓及sin、cos
  16. 畫標準圓及sin、cos,可輸入值
  17. sin、cos之值,單位°
  18. sin、cos之值,單位°,可輸入值
  19. sin(A-B)圖解
  20. sin(A+B)圖解
  21. 一次多項式圖解
  22. 畫二元一次聯立方程式,可輸入值
  23. 多項式圖形計算機,展現多段切線斜率,可輸入值
  24. 多個多項式圖形計算機,可輸入值