Top > OOoBasic > Draw > Shapes
These search terms have been highlighted:ConnectorShape

図形 Edit

図形、シェープの種類と描写方法について説明します。

図形の種類 Edit

図形の種類と一般的なプロパティ一覧です。

サービス名図形名シェープ塗り線影テキスト回転ポリポリゴン
com.sun.star.drawing.AppletShapeJava アプレットX
com.sun.star.drawing.CaptionShapeキャプションXXXXXX
com.sun.star.drawing.ClosedBezierShape閉じたベジェXXXXXX
com.sun.star.drawing.ClosedFreeHandShape閉じたフリーハンド
com.sun.star.drawing.ConnectorShapeコネクタXXXXX
com.sun.star.drawing.ControlShapeコントロールX
com.sun.star.drawing.CustomShapeカスタムXXXXXX
com.sun.star.drawing.EllipseShape楕円形XXXXXX
com.sun.star.drawing.FrameShapeフレームX
com.sun.star.drawing.GraphicObjectShape画像XXXX
com.sun.star.drawing.LineShape直線XXXXX
com.sun.star.drawing.MeasureShape尺XXXXX
com.sun.star.drawing.MediaShape音楽と動画X
com.sun.star.drawing.OLE2Shape埋め込み型オブジェクトX
com.sun.star.drawing.OpenBezierShape開いたベジェXXXXXX
com.sun.star.drawing.OpenFreeHandShape開いたフリーハンド
com.sun.star.drawing.PageShapeページX
com.sun.star.drawing.PluginShapeプラグインX
com.sun.star.drawing.PolyLinePathShapeポリラインパス
com.sun.star.drawing.PolyLineShapeポリラインXXXXXX
com.sun.star.drawing.PolyPolygonPathShape
com.sun.star.drawing.PolyPolygonShapeポリポリゴンXXXXXXX
com.sun.star.drawing.RectangleShape四角形XXXXXX
com.sun.star.drawing.TextShapeテキストXXXXXX

図形の描写 Edit

シェープの描写は次のような手順で行います。

  1. シェープをインスタンス化する
  2. シェープの位置とサイズを設定する
  3. (必要なプロパティを設定する)
  4. ページに追加する
  5. プロパティを設定する

多くの図形ではページに図形を追加する前にプロパティを変更できません。ほとんどのプロパティの設定はページに図形を追加した後で行います。

直線 Edit

直線は com.sun.star.drawing.LineShape サービスを利用します。

  0
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17

Sub shapes_line
  oDoc = ThisComponent
  oDrawPage = oDoc.getDrawPages().getByIndex(0)
  
  oLineShape = oDoc.createInstance("com.sun.star.drawing.LineShape")
 
  aPoint = CreateUnoStruct("com.sun.star.awt.Point")
  aSize = CreateUnoStruct("com.sun.star.awt.Size")
  aPoint.X = 1000
  aPoint.Y = 1000
  aSize.Width = 5000
  aSize.Height = 5000
  
  oLineShape.setPosition(aPoint)
  oLineShape.setSize(aSize)
 
  oDrawPage.add(oLineShape)
End Sub

ベジェ曲線 Edit

開いたベジェ曲線は com.sun.star.drawing.OpenBezierShape サービス、閉じたベジェ曲線は com.sun.star.drawing.ClosedBezierShape サービスを利用します。閉じたベジェ曲線は始点と終点が結ばれます。

うまくベジェ曲線を書くのは座標の指定が大変です。

  0
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46

Sub shapes_openbezier
  oDoc = ThisComponent
  oDrawPage = oDoc.getDrawPages().getByIndex(0)
  
  oOpenBezierShape = oDoc.createInstance("com.sun.star.drawing.OpenBezierShape")
  
  aPoint = CreateUnoStruct("com.sun.star.awt.Point")
  aSize = CreateUnoStruct("com.sun.star.awt.Size")
 ' aPoint.X = 5000
 ' aPoint.Y = 1000
 ' aSize.Width = 5000
 ' aSize.Height = 5000
 
  oOpenBezierShape.setPosition(aPoint)
  'oOpenBezierShape.setSize(aSize)
  
  Dim aPoints(6) As New com.sun.star.awt.Point
  aPoints(0).X = 1000 ' first point
  aPoints(0).Y = 3500
  aPoints(1).X = 2500 ' control of the first point
  aPoints(1).Y = 0
  aPoints(2).X = 6000 ' control of the second point
  aPoints(2).Y = 0
  aPoints(3).X = 10500 ' second point
  aPoints(3).Y = 4000
  aPoints(4).X = 8000 ' control of the second point
  aPoints(4).Y = 6600
  aPoints(5).X = 12000 ' control of the third point
  aPoints(5).Y = 7600
  aPoints(6).X = 13000 ' third point
  aPoints(6).Y = 3500
  
  ePolygonFlags = com.sun.star.drawing.PolygonFlags
  aFlags() = Array( _
    ePolygonFlags.NORMAL,ePolygonFlags.CONTROL,_
    ePolygonFlags.CONTROL,ePolygonFlags.SYMMETRIC,ePolygonFlags.CONTROL, _
    ePolygonFlags.CONTROL,ePolygonFlags.NORMAL)
  
  aPolyPolygonBezierCoords = CreateUnoStruct("com.sun.star.drawing.PolyPolygonBezierCoords")
  aPolyPolygonBezierCoords.Coordinates = Array(aPoints)
  aPolyPolygonBezierCoords.Flags = Array(aFlags)
  
 
  oDrawPage.add(oOpenBezierShape)
  
  oOpenBezierShape.PolyPolygonBezier = aPolyPolygonBezierCoords
End Sub

ベジェ曲線の各点の指定は複雑ですが、線の始点と終点の二点のみが制御点を一つだけもち、中間点は制御点を二つ持ちます。そして、点の指定順は「始点」-「始点の制御点」-「中間点の制御点１」-「中間点」-「中間点の制御点２」-「終点の制御点」-「終点」の順になります。

openbezier-1.png

テキスト Edit

テキストは com.sun.star.drawing.TextShape サービスで描きます。テキストは図形挿入後に設定します。

  0
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18

Sub shapes_text
  oDoc = ThisComponent
  oDrawPage = oDoc.getDrawPages().getByIndex(0)
  
  oTextShape = oDoc.createInstance("com.sun.star.drawing.TextShape")
 
  aPoint = CreateUnoStruct("com.sun.star.awt.Point")
  aSize = CreateUnoStruct("com.sun.star.awt.Size")
  aPoint.X = 1000
  aPoint.Y = 1000
  aSize.Width = 5000
  aSize.Height = 5000
  oTextShape.setPosition(aPoint)
  oTextShape.setSize(aSize)
 
  oDrawPage.add(oTextShape)
  
  oTextShape.setString("TEXT IN THE TEXT SHAPE")
End Sub

テキストシェープは他の図形と同じように背景などの設定利用できます。また、CornerRadius プロパティを設定すれば四角形のように枠線の角を丸められます。四角形の描写を参照してください。

四角形 Edit

四角形は com.sun.star.drawing.RectangleShape サービスで作成します。

  0
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17

Sub shapes_rect
  oDoc = ThisComponent
  oDrawPage = oDoc.getDrawPages().getByIndex(0)
  
  oRectShape = oDoc.createInstance("com.sun.star.drawing.RectangleShape")
 
  aPoint = CreateUnoStruct("com.sun.star.awt.Point")
  aSize = CreateUnoStruct("com.sun.star.awt.Size")
  aPoint.X = 1000
  aPoint.Y = 1000
  aSize.Width = 5000
  aSize.Height = 5000
  
  oRectShape.setPosition(aPoint)
  oRectShape.setSize(aSize)
 
  oDrawPage.add(oRectShape)
End Sub

CornerRadius プロパティを設定すると角の丸まった四角形になります。long 型で指定します。角の丸みは図形の半分の長さまでしか有効になりません。

  0
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18

Sub shapes_rect_corner
  oDoc = ThisComponent
  oDrawPage = oDoc.getDrawPages().getByIndex(0)
  
  oRectShape = oDoc.createInstance("com.sun.star.drawing.RectangleShape")
 
  aPoint = CreateUnoStruct("com.sun.star.awt.Point")
  aSize = CreateUnoStruct("com.sun.star.awt.Size")
  aPoint.X = 1000
  aPoint.Y = 1000
  aSize.Width = 7000
  aSize.Height = 5000
  
  oRectShape.setPosition(aPoint)
  oRectShape.setSize(aSize)
  oRectShape.CornerRadius = 500
 
  oDrawPage.add(oRectShape)
End Sub

rect-1.png

楕円 Edit

楕円は com.sun.star.drawing.EllipseShape サービスを利用します。

円の描写は、円の半径を指定するのではなく円の幅 Width と高さ Height を指定します。サイズの幅 Width と高さ Height が等しいとき楕円は円になります。

  0
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17

Sub shapes_ellipse
  oDoc = ThisComponent
  oDrawPage = oDoc.getDrawPages().getByIndex(0)
  
  oEllipseShape = oDoc.createInstance("com.sun.star.drawing.EllipseShape")
 
  aPoint = CreateUnoStruct("com.sun.star.awt.Point")
  aSize = CreateUnoStruct("com.sun.star.awt.Size")
  aPoint.X = 1000
  aPoint.Y = 1000
  aSize.Width = 5000
  aSize.Height = 5000
  
  oEllipseShape.setPosition(aPoint)
  oEllipseShape.setSize(aSize)
 
  oDrawPage.add(oEllipseShape)
End Sub

この図形で円の一部分を切り取ったパイ型や、円弧も描けます。円の一部の開始位置を CircleStartAngle に、終了位置を CircleEndAngle に角度の 100 倍の値で指定します。そして、描く種類を CircleKind プロパティに com.sun.star.drawing.CircleKind enu で指定します。

  • FULL: 全円
  • SECTION: パイ型
  • CUT: 切り取り
  • ARC: 円弧

ellipse-2.png

  0
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21

Sub shapes_ellipse_kind
  oDoc = ThisComponent
  oDrawPage = oDoc.getDrawPages().getByIndex(0)
  
  oEllipse = oDoc.createInstance("com.sun.star.drawing.EllipseShape")
 
  aPoint = CreateUnoStruct("com.sun.star.awt.Point")
  aSize = CreateUnoStruct("com.sun.star.awt.Size")
  aPoint.X = 1000
  aPoint.Y = 1000
  aSize.Width = 5000
  aSize.Height = 5000
  
  oEllipse.setPosition(aPoint)
  oEllipse.setSize(aSize)
  
  oEllipse.CircleKind = com.sun.star.drawing.CircleKind.CUT
  oEllipse.CircleStartAngle = 0
  oEllipse.CircleEndAngle = 7000  ' 70 degree
 
  oDrawPage.add(oEllipse)
End Sub

ellipse-1.png

画像 Edit

画像は com.sun.star.drawing.GraphicObjectShape サービスを利用します。

画像の挿入時に URL を指定するとリンクとして挿入されます。ドキュメントに埋め込まれるように画像を挿入するには後半を参照してください。

  0
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18

Sub shapes_graphic_link
  oDoc = ThisComponent
  oDrawPage = oDoc.getDrawPages().getByIndex(0)
  
  oGraphicShape = oDoc.createInstance("com.sun.star.drawing.GraphicObjectShape")
  
  aPoint = CreateUnoStruct("com.sun.star.awt.Point")
  aSize = CreateUnoStruct("com.sun.star.awt.Size")
  aPoint.X = 1000
  aPoint.Y = 1000
  aSize.Width = 5000
  aSize.Height = 5000
 
  oGraphicShape.setPosition(aPoint)
  oGraphicShape.setSize(aSize)
  
  oGraphicShape.GraphicURL = "file:///C:/usr/current_16.png"
  oDrawPage.add(oGraphicShape)
End Sub

画像がドキュメントに埋め込まれるように挿入します。

  0
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26

Sub shapes_graphic_embed
  oDoc = ThisComponent
  oDrawPage = oDoc.getDrawPages().getByIndex(0)
  
  oGraphicShape = oDoc.createInstance("com.sun.star.drawing.GraphicObjectShape")
  
  aPoint = CreateUnoStruct("com.sun.star.awt.Point")
  aSize = CreateUnoStruct("com.sun.star.awt.Size")
  aPoint.X = 1000
  aPoint.Y = 1000
  aSize.Width = 5000
  aSize.Height = 5000
 
  oGraphicShape.setPosition(aPoint)
  oGraphicShape.setSize(aSize)
  
  oGP = CreateUnoService("com.sun.star.graphic.GraphicProvider")
  
  Dim aArgs(0) As New com.sun.star.beans.PropertyValue
  aArgs(0).Name = "URL"
  aArgs(0).Value = "file:///C:/usr/current_16.png"
  
  oGraphic = oGP.queryGraphic(aArgs)
  oGraphicShape.Graphic = oGraphic
  
  oDrawPage.add(oGraphicShape)
End Sub

コントロール Edit

コントロールシェープは com.sun.star.drawing.ControlShape サービスに使用したいコントロールモデルを設定して利用します。コントロールのモデルは com.sun.star.frame.component モジュールのサービスを利用します。

  0
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20

Sub shapes_control
  oDoc = ThisComponent
  oDrawPage = oDoc.getDrawPages().getByIndex(0)
  
  oControlShape = oDoc.createInstance("com.sun.star.drawing.ControlShape")
 
  aPoint = CreateUnoStruct("com.sun.star.awt.Point")
  aSize = CreateUnoStruct("com.sun.star.awt.Size")
  aPoint.X = 1000
  aPoint.Y = 1000
  aSize.Width = 3000
  aSize.Height = 1000
  oControlShape.setPosition(aPoint)
  oControlShape.setSize(aSize)
 
  oButtonModel = CreateUnoService("com.sun.star.form.component.CommandButton")
  
  oControlShape.setControl(oButtonModel)
 
  oDrawPage.add(oControlShape)
End Sub

コネクタ Edit

線で結ぶコネクタシェープは com.sun.star.drawing.ConnectorShape を利用します。StartShape に開始シェープを、EndShape に接続するシェープを指定します。接続する位置は StartGluePointIndex および EndGluePointIndex に指定します。シェープの接続点は上から時計回りに 0 - 3 で指定します。

  0
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31

Sub shapes_connector
  oDoc = ThisComponent
  oDrawPage = oDoc.getDrawPages().getByIndex(0)
  
  oRectShape1 = oDoc.createInstance("com.sun.star.drawing.RectangleShape")
  oRectShape2 = oDoc.createInstance("com.sun.star.drawing.RectangleShape")
  
  aPoint = CreateUnoStruct("com.sun.star.awt.Point")
  aSize = CreateUnoStruct("com.sun.star.awt.Size")
  aPoint.X = 1000
  aPoint.Y = 1000
  aSize.Width = 5000
  aSize.Height = 5000
  oRectShape1.setPosition(aPoint)
  oRectShape1.setSize(aSize)
  
  aPoint.X = 9000
  aPoint.Y = 1000
  oRectShape2.setPosition(aPoint)
  oRectShape2.setSize(aSize)
  
  oDrawPage.add(oRectShape1)
  oDrawPage.add(oRectShape2)
  
  oConnectorShape = oDoc.createInstance("com.sun.star.drawing.ConnectorShape")
  oDrawPage.add(oConnectorShape)
  
  oConnectorShape.StartShape = oRectShape1
  oConnectorShape.StartGluePointIndex = 0
  oConnectorShape.EndShape = oRectShape2
  oConnectorShape.EndGluePointIndex = 3
End Sub

コネクタの両端の矢印は直線などの矢印の設定と同じです。

ポリライン Edit

直線の連続ポリラインは com.sun.star.drawing.PolyLineShape を利用します。PolyPolygon プロパティに各点を指定します。ポリラインは閉じていないため塗りはありません。

  0
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24

Sub shapes_polyline
  oDoc = ThisComponent
  oDrawPage = oDoc.getDrawPages().getByIndex(0)
  
  oPolyLineShape = oDoc.createInstance("com.sun.star.drawing.PolyLineShape")
 
  aPoint = CreateUnoStruct("com.sun.star.awt.Point")
  aSize = CreateUnoStruct("com.sun.star.awt.Size")
  aPoint.X = 1000
  aPoint.Y = 1000
  oPolyLineShape.setPosition(aPoint)
 
  Dim aPoints(3) As New com.sun.star.awt.Point
  aPoints(0).X = 1000
  aPoints(0).Y = 3500
  aPoints(1).X = 2500
  aPoints(1).Y = 0
  aPoints(2).X = 6000
  aPoints(2).Y = 0
  aPoints(3).X = 10500
  aPoints(3).Y = 4000
 
  oDrawPage.add(oPolyLineShape)
  oPolyLineShape.PolyPolygon = Array(aPoints)
End Sub

ポリポリゴン Edit

ポリラインとは違いポリポリゴンは直線の連続が閉じたものです。com.sun.star.drawing.PolyPolygonShape サービスを利用します。

  0
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24

Sub shapes_polypolygon
  oDoc = ThisComponent
  oDrawPage = oDoc.getDrawPages().getByIndex(0)
  
  oPolyPolygonShape = oDoc.createInstance("com.sun.star.drawing.PolyPolygonShape")
 
  aPoint = CreateUnoStruct("com.sun.star.awt.Point")
  aSize = CreateUnoStruct("com.sun.star.awt.Size")
  aPoint.X = 1000
  aPoint.Y = 1000
  oPolyPolygonShape.setPosition(aPoint)
 
  Dim aPoints(3) As New com.sun.star.awt.Point
  aPoints(0).X = 1000
  aPoints(0).Y = 3500
  aPoints(1).X = 2500
  aPoints(1).Y = 0
  aPoints(2).X = 6000
  aPoints(2).Y = 0
  aPoints(3).X = 10500
  aPoints(3).Y = 4000
 
  oDrawPage.add(oPolyPolygonShape)
  oPolyPolygonShape.PolyPolygon = Array(aPoints)
End Sub

音楽と動画 Edit

音楽と動画は com.sun.star.drawing.MediaShape サービスを利用します。

MediaURL プロパティに表示再生する音声または画像ファイルを指定します。

  0
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19

Sub shapes_sound
  oDoc = ThisComponent
  oDrawPage = oDoc.getDrawPages().getByIndex(0)
  
  oMediaShape = oDoc.createInstance("com.sun.star.drawing.MediaShape")
 
  aPoint = CreateUnoStruct("com.sun.star.awt.Point")
  aSize = CreateUnoStruct("com.sun.star.awt.Size")
  aPoint.X = 1000
  aPoint.Y = 1000
  aSize.Width = 5000
  aSize.Height = 5000
  
  oMediaShape.setPosition(aPoint)
  oMediaShape.setSize(aSize)
  
  oDrawPage.add(oMediaShape)
  
  oMediaShape.MediaURL = "file:///C:/usr/a/1.wav"
End Sub

ページ Edit

ページシェープはサイドビューのように指定したページのサムネイルを表示します。サービスは com.sun.star.drawing.PageShape です。PageNumber プロパティに表示したいページ番号を指定します。

  0
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17

Sub shapes_page
  oDoc = ThisComponent
  oDrawPage = oDoc.getDrawPages().getByIndex(0)
  
  oPageShape = oDoc.createInstance("com.sun.star.drawing.PageShape")
 
  aPoint = CreateUnoStruct("com.sun.star.awt.Point")
  aSize = CreateUnoStruct("com.sun.star.awt.Size")
  aPoint.X = 1000
  aPoint.Y = 1000
  aSize.Width = 7000
  aSize.Height = 7000
  oPageShape.setPosition(aPoint)
  oPageShape.setSize(aSize)
 
  oDrawPage.add(oPageShape)
  oPageShape.PageNumber = 2
End Sub

ファイルを保存したとき PageNumber プロパティが保存されないようです。

フレーム Edit

別のドキュメントを表示するフレームは com.sun.star.drawing.FrameShape サービスで作成できます。しかし、挿入すると OLE2Shape になってしまいます。

FrameURL プロパティに表示したいファイル URL を指定します。

  0
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16

Sub shapes_frame
  oDoc = ThisComponent
  oDrawPage = oDoc.getDrawPages().getByIndex(0)
  
  oFrameShape = oDoc.createInstance("com.sun.star.drawing.FrameShape")
 
  aPoint = CreateUnoStruct("com.sun.star.awt.Point")
  aSize = CreateUnoStruct("com.sun.star.awt.Size")
  aPoint.X = 1000
  aPoint.Y = 1000
  aSize.Width = 5000
  aSize.Height = 5000
 
  oDrawPage.add(oFrameShape)
  
  oFrameShape.FrameURL = "file:///C:/usr/1.odt"
End Sub

プラグイン Edit

プラグインシェープは com.sun.star.drawing.PluginShape サービスを利用します。

pdf ファイルを表示するプラグインシェープを作成します。

  0
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20

Sub shapes_plugin
  oDoc = ThisComponent
  oDrawPage = oDoc.getDrawPages().getByIndex(0)
  
  oPluginShape = oDoc.createInstance("com.sun.star.drawing.PluginShape")
 
  aPoint = CreateUnoStruct("com.sun.star.awt.Point")
  aSize = CreateUnoStruct("com.sun.star.awt.Size")
  aPoint.X = 1000
  aPoint.Y = 1000
  aSize.Width = 15000
  aSize.Height = 15000
  
  oPluginShape.setPosition(aPoint)
  oPluginShape.setSize(aSize)
  
  oDrawPage.add(oPluginShape)
  
  oPluginShape.PluginMimeType = "application/pdf"
  oPluginShape.PluginURL = "file:///C:/usr/doc/DevelopersGuide_2.3.pdf"
End Sub

PluginMimeType にタイプを、PluginURL にファイルの URL を指定します。また、オプションを PluginCommands に []com.sun.star.beans.PropertyValue で指定します。設定は図形を挿入後に行います。
Attach file: fileellipse-2.png 554 download [Information] filerect-1.png 577 download [Information] fileopenbezier-1.png 593 download [Information] fileellipse-1.png 596 download [Information]
Reload   New Lower page making Edit Freeze Diff Upload Copy Rename   Front page List of pages Search Recent changes Backup   Help   RSS of recent changes