### 基本图形
OkayPainter提供了多种基本图形,开发者可以根据这些基本图形构建出更多的图形,也可以继承Node类自定义图形。
#### Rectangle (长方形)
~~~
let canvas = new okay.Canvas({
ele: 'canvas',
canAction:true
})
let rectangle = new okay.Rectangle()
rectangle.setPosition(300,300)
rectangle.setSize(80,80)
rectangle.setColor(new okay.Color(255,0,0,255))
canvas.addChild(rectangle)
canvas.paint()
~~~
#### HollowRectangle (空心长方形)
~~~
let canvas = new okay.Canvas({
ele: 'canvas',
canAction:true
})
let rectangle = new okay.HollowRectangle()
rectangle.setPosition(300,300)
rectangle.setSize(80,80)
rectangle.setLineWidth(10) //设置线框
rectangle.setColor(new okay.Color(255,0,0,255))
canvas.addChild(rectangle)
canvas.paint()
~~~
#### Line (线条)
~~~
let canvas = new okay.Canvas({
ele: 'canvas',
canAction:true
})
let line = new okay.Line(new okay.Point(0,0), new okay.Point(300, 300)) //一条从(0,0)到(300, 300)
line.setColor(new okay.Color(255, 0 ,0, 255))
line.setLineWidth(3)//设置线框
canvas.addChild(line)
canvas.paint()
~~~
#### Sector (椭圆)
~~~
let canvas = new okay.Canvas({
ele: 'canvas',
canAction:true
})
let line = new okay.Sector(60,Math.PI/3,2*Math.PI/3) //一个半径60,角度60到120度的扇形
line.setColor(new okay.Color(255, 0 ,0, 255))
line.setPosition(300, 300)
canvas.addChild(line)
canvas.paint()
~~~
#### HollowSector(空心椭圆)
~~~
let canvas = new okay.Canvas({
ele: 'canvas',
canAction:true
})
let line = new okay.HollowSector(60,Math.PI/3,2*Math.PI/3) //一个半径60,角度60到120度的扇形
line.setColor(new okay.Color(255, 0 ,0, 255))
line.setPosition(300, 300)
canvas.addChild(line)
canvas.paint()
~~~
#### Circle (圆)
~~~
let canvas = new okay.Canvas({
ele: 'canvas',
canAction:true
})
let line = new okay.Circle(60) //一个半径60的圆
line.setColor(new okay.Color(255, 0 ,0, 255))
line.setPosition(300, 300)
canvas.addChild(line)
canvas.paint()
~~~
#### HollowCircle (空心圆)
~~~
let canvas = new okay.Canvas({
ele: 'canvas',
canAction:true
})
let line = new okay.HollowCircle(60) //一个半径60的圆
line.setColor(new okay.Color(255, 0 ,0, 255))
line.setPosition(300, 300)
canvas.addChild(line)
canvas.paint()
~~~
#### Triangle(三角形)
~~~
let canvas = new okay.Canvas({
ele: 'canvas',
canAction:true
})
let trig = new okay.Triangle(new okay.Point(60,60),new okay.Point(120,120),new okay.Point(180,60)) //一个顶点为(60,60),(120,120),(180,60)的三角形
trig.setColor(new okay.Color(255, 0 ,0, 255))
canvas.addChild(trig)
canvas.paint()
~~~
#### HollowTriangle (空心三角形)
~~~
let canvas = new okay.Canvas({
ele: 'canvas',
canAction:true
})
let trig = new okay.HollowTriangle(new okay.Point(60,60),new okay.Point(120,120),new okay.Point(180,60)) //一个顶点为(60,60),(120,120),(180,60)的三角形
trig.setColor(new okay.Color(255, 0 ,0, 255))
canvas.addChild(trig)
canvas.paint()
~~~
#### Ellipse (椭圆)
~~~
let canvas = new okay.Canvas({
ele: 'canvas',
canAction:true
})
let ellipse = new okay.Ellipse(30,60) //一个长径为60,短径为30的椭圆
ellipse.setColor(new okay.Color(255, 0 ,0, 255))
ellipse.setPosition(300,300)
canvas.addChild(ellipse)
canvas.paint()
~~~
#### HollowEllipse(空心椭圆)
~~~
let canvas = new okay.Canvas({
ele: 'canvas',
canAction:true
})
let ellipse = new okay.HollowEllipse(30,60) //一个长径为60,短径为30的椭圆
ellipse.setColor(new okay.Color(255, 0 ,0, 255))
ellipse.setPosition(300,300)
canvas.addChild(ellipse)
canvas.paint()
~~~
#### Text (文本)
~~~
let canvas = new okay.Canvas({
ele: 'canvas',
canAction:true
})
let text = new okay.Text('Hello World!') //创建字符串为”Hello World!“的文本
text.setColor(new okay.Color(255, 0 ,0, 255))
text.setPosition(300,300)
canvas.addChild(text)
canvas.paint()
~~~
#### Image (图像)
~~~
let canvas = new okay.Canvas({
ele: 'canvas',
canAction:true
})
let image = new okay.Image('assert/BluePlane.png') //创建一个图片元素,图片地址assert/BluePlane.png
image.setPosition(300,300)
canvas.addChild(image)
canvas.paint()
~~~
