PHP繪圖類別:修訂版本之間的差異
出自六年制學程
(→一次物件) |
(→一次物件) |
||
第 68 行: | 第 68 行: | ||
物件列表: | 物件列表: | ||
#chronologies(畫諸年表): | #chronologies(畫諸年表): | ||
− | #*必要元素:事件。如:「$某年表['event'][]=array('coord'=>幾分之幾,'name'=>時點名,'note'=>事件描述); | + | #*必要元素:事件。如:「$某年表['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)只能整體設定,不能各別調整。 | #*必要元素:時期。如:「$某年表['period'][]=array('start'=>幾分之幾,'end'=>幾分之幾,'name'=>'時期名');」。可以調整線的粗細(width)、顏色(color)、有無箭頭('arrow),字的大小(period-font-size)、顏色(period-color)、字體(period-font-family),以及字與軸的距離(period-ry)。但字與線的間距(period-padding)只能整體設定,不能各別調整。 | ||
#*選用元素: | #*選用元素: | ||
第 81 行: | 第 81 行: | ||
#*#$某年表['scale-width']=刻度粗細; | #*#$某年表['scale-width']=刻度粗細; | ||
#*#$某年表['scale-color']=刻度設色; | #*#$某年表['scale-color']=刻度設色; | ||
+ | #*#$某年表['scale-only-up']=刻度只畫軸以上; | ||
+ | #*#$某年表['scale-only-down']=刻度只畫軸以下; | ||
+ | #*#$某年表['scale-none']=不畫刻度(只顯示字); | ||
#*#$某年表['title-color']=標題設色; | #*#$某年表['title-color']=標題設色; | ||
#*#$某年表['title-font-size']=標題字大小; | #*#$某年表['title-font-size']=標題字大小; |
2018年12月2日 (日) 17:41的修訂版本
jendo.org/SVG/svgdraw.php
將陣列化為子串
功能
- 畫直角座標系:性質coordinate為真
- 畫方格紙:性質squareLattice為真
- 畫函式:性質functions
- 畫一次方程式:函式名drawLine
- 畫拋物線:函式名parabola
- 畫多項式:函式名polynomialEquation
- 畫正弦:函式名sinValue
- 畫餘弦:函式名cosValue
- 畫借錢投資:函式名borrowMoneyToInvest
- 畫連點成線:函式名value2point
- 畫標準圓:函式名stdcircle
- 畫2016年之前的國中行政員額:函式名「國中行政」,畫左右無限延伸之折線
- 畫核心圓(含字):性質cores
- 畫矩形(含字):性質rects
- 畫六角框(含字):性質hexagons
-----單一標籤圖形----- - 畫多邊形:性質polygons
- 畫線段:性質lineSegments
- 畫圓(圓心為直角座標,半徑為SVG長度):性質circles,其實是畫點,不受xu,yu不等影響。
- 畫橢圓(中心、x軸半長、y軸半長皆為直角座標):性質ellipses
- 畫橢圓弧(中心、x軸半長、y軸半長皆為直角座標):性質arcs
- 畫字:性質alnums
- 加前綴與後綴:性質extraPrefix與extraSuffix
基本方法
- style(陣列):用陣例的字串索引,決定著色(fill)、不透明度(fill-opacity)、框線(color,width,dash)、箭頭(arrowStart,arrowEnd)
- xc2p:直角座標轉 SVG 座標
- yc2p:直角座標轉 SVG 座標
- getDecimals:取一數的小數部分或小數位數
- 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藍;