アイコンWeb制作実験

HTML/CSS/jQuery.

試した様子と結果です.

Fabric.js標準の基本図形7種

イメージ

公開:

Fabric.jsでは7種類の基本図形を標準で装備していますが、そのオブジェクト名と主な属性の与え方です。

基本図形7種

直線四角三角楕円連続線多角形、 の7種です。

直線(fabric.Line)

canvas.add(new fabric.Line(
  [40, 70, 160, 120],{	//始点x,y,終点x,y
  strokeWidth: 3,		//太さ
  stroke: 'blue',		//色
  angle: 0				//角度
}));

四角(fabric.Rect)

canvas.add(new fabric.Rect({
  left: 60,			//左上角の左
  top: 60,			//左上角の上
  width: 80,		//幅
  height: 60,		//高さ
  strokeWidth: 3,	//線の太さ
  stroke: 'blue',	//線の色
  fill: 'lightblue',//塗潰しの色
  angle: 0			//角度
}));

三角(fabric.Triangle)

canvas.add(new fabric.Triangle({
  left: 60,			//左上角相当部分(赤点)の左
  top: 60,			//左上角相当部分(赤点)の上
  width: 80,		//幅
  height: 60,		//高さ
  strokeWidth: 3,	//線の太さ
  stroke: 'blue',	//線の色
  fill: 'lightblue',//塗潰しの色
  angle: 0			//角度
}));

円(fabric.Circle)

canvas.add(new fabric.Circle({
  left: 70,			//左上角相当部分(赤点)の左
  top: 70,			//左上角相当部分(赤点)の上
  radius: 30,		//半径
  strokeWidth: 3,	//線の太さ
  stroke: 'blue',	//線の色
  fill: 'lightblue',//塗潰しの色
  angle: 0			//角度
}));

楕円(fabric.Ellipse)

canvas.add(new fabric.Ellipse({
  left: 50,			//左上角相当部分(赤点)の左
  top: 70,			//左上角相当部分(赤点)の上
  rx: 50,			//水平半径
  ry: 30,			//垂直半径
  strokeWidth: 3,	//線の太さ
  stroke: 'blue',	//線の色
  fill: 'lightblue',//塗潰しの色
  angle: 0			//角度
}));

連続線(fabric.Polyline:終点閉じない)

canvas.add(new fabric.Polyline([
  {x: 40, y: 60},		//始点
  {x: 160, y: 120},		//中間点1
  {x: 60, y: 110},		//中間点2
  {x: 140, y: 80}],{	//終点
  strokeWidth: 3,		//線の太さ
  stroke: 'blue',		//線の色
  fill: 'lightblue',	//塗潰しの色
  angle: 0				//角度
}));

連続線といっても1つの要素になります。始点~終点の座標は配列([])なので注意です。

多角形(fabric.Polygon:終点閉じる)

canvas.add(new fabric.Polygon([
  {x: 40, y: 60},		//始点=終点
  {x: 160, y: 120},		//中間点1
  {x: 60, y: 110},		//中間点2
  {x: 140, y: 80}],{	//中間点3
  strokeWidth: 3,		//線の太さ
  stroke: 'blue',		//線の色
  fill: 'lightblue',	//塗潰しの色
  angle: 0				//角度
}));

各座標は前述「連続線(fabric.Polyline:終点閉じない)」と同じで、終点は自動的に閉じられます。これも1つの要素になります。