0.「Scripts」の準備

「title」に「draw」と入力し，その右側にある「event」を「before:prepare」に変更してください。

image.png

1. 枠線を指定する場合

ここまで紹介した，rect, ellipse, triangle, circleは，strokeとstrokeWidthを指定することで枠線を表示できます。枠線は必要な場合だけ追加します。fillにnullを入れると枠線だけが表示されます。

四角形：rect

this.options.content.push({
	type: 'rect',
	left: 0, top: 0, angle: 0,
	width: 100, height: 100, fill: 'red',
	stroke: 'black', strokeWidth: 3
})

image.png

楕円：ellipse

this.options.content.push({
  type: 'ellipse',
  left: 0, top: 0, angle: 0,
  width: 100, height: 200, fill: 'green',
	stroke: 'black', strokeWidth: 3
})

image.png

三角形：triangle

this.options.content.push({
  type: 'triangle',
  left: 0, top: 0, angle: 90,
  width: 100, height: 100, fill: 'blue',
	stroke: 'black', strokeWidth: 3
})

image.png

正円：circle

this.options.content.push({
  type: 'circle',
  left: 0, top: 0, angle: 0,
  width: 100, fill: 'green',
	stroke: 'black', strokeWidth: 3
})

image.png

2. 枠線だけを指定する場合

以下のようにfillを省略すると，枠線だけ表示されます(ellipse, triangle, circleも共通です)。