💎一站式轻松地调用各大LLM模型接口,支持GPT4、智谱、豆包、星火、月之暗面及文生图、文生视频 广告
### 基本图形 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() ~~~