Fabric.js几何形状

Question

除了Rect，Triangle，Ellipse之外，我想使用不同的几何形状（如六边形，星形......）。我还能做什么？我该怎么办？

var canvas = new fabric.Canvas('c');
var rect = new fabric.Rect({
  left: 50,
  top: 50,
  fill: 'green',
  width: 40,
  height: 80
});
var circle = new fabric.Circle({
  radius: 20, 
  fill: 'red', 
  left: 100, 
  top: 100
});

Answer 1

您可以使用Fabric.Polygon构建任何多边形（六边形，星形等）。

var myPoly = new fabric.Polygon(points, {
    stroke: 'red',
    left: 50,
    top: 50,
    strokeWidth: 2,
    strokeLineJoin: 'bevil'
},false);
canvas.add(myPoly);

您可以使用所需的边数来计算任何正多边形的顶点，如下所示：

// get the vertices of a hexagon with a radius of 30
var points=regularPolygonPoints(6,30);

function regularPolygonPoints(sideCount,radius){
    var sweep=Math.PI*2/sideCount;
    var cx=radius;
    var cy=radius;
    var points=[];
    for(var i=0;i<sideCount;i++){
        var x=cx+radius*Math.cos(i*sweep);
        var y=cy+radius*Math.sin(i*sweep);
        points.push({x:x,y:y});
    }
    return(points);
}

您可以使用所需的尖峰计数计算任何星的顶点，如下所示：

// get the vertices of a hexagon with a radius of 30
var points=starPolygonPoints(5,50,25);

function starPolygonPoints(spikeCount, outerRadius, innerRadius) {
  var rot = Math.PI / 2 * 3;
  var cx = outerRadius;
  var cy = outerRadius;
  var sweep = Math.PI / spikeCount;
  var points = [];
  var angle = 0;

  for (var i = 0; i < spikeCount; i++) {
    var x = cx + Math.cos(angle) * outerRadius;
    var y = cy + Math.sin(angle) * outerRadius;
    points.push({x: x, y: y});
    angle += sweep;

    x = cx + Math.cos(angle) * innerRadius;
    y = cy + Math.sin(angle) * innerRadius;
    points.push({x: x, y: y});
    angle += sweep
  }
  return (points);
}

因此，一般而言，对于您想要的任何几何形状，您必须计算顶点并将这些顶点输入Fabric.Polygon

这是示例代码和演示：

// create a wrapper around native canvas element (with id="c")
var canvas = new fabric.Canvas('canvas');

// make a hexagon
var points=regularPolygonPoints(6,30);

var myPoly = new fabric.Polygon(points, {
  stroke: 'red',
  left: 10,
  top: 10,
  strokeWidth: 2,
  strokeLineJoin: 'bevil'
},false);
canvas.add(myPoly);

// make a star
var points=starPolygonPoints(5,50,25);

var myStar = new fabric.Polygon(points, {
  stroke: 'red',
  left: 100,
  top: 10,
  strokeWidth: 2,
  strokeLineJoin: 'bevil'
},false);
canvas.add(myStar);


function regularPolygonPoints(sideCount,radius){
  var sweep=Math.PI*2/sideCount;
  var cx=radius;
  var cy=radius;
  var points=[];
  for(var i=0;i<sideCount;i++){
    var x=cx+radius*Math.cos(i*sweep);
    var y=cy+radius*Math.sin(i*sweep);
    points.push({x:x,y:y});
  }
  return(points);
}


function starPolygonPoints(spikeCount, outerRadius, innerRadius) {
  var rot = Math.PI / 2 * 3;
  var cx = outerRadius;
  var cy = outerRadius;
  var sweep = Math.PI / spikeCount;
  var points = [];
  var angle = 0;

  for (var i = 0; i < spikeCount; i++) {
    var x = cx + Math.cos(angle) * outerRadius;
    var y = cy + Math.sin(angle) * outerRadius;
    points.push({x: x, y: y});
    angle += sweep;

    x = cx + Math.cos(angle) * innerRadius;
    y = cy + Math.sin(angle) * innerRadius;
    points.push({x: x, y: y});
    angle += sweep
  }
  return (points);
}

body{ background-color: ivory; }
#canvas{border:1px solid red;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.4.0/fabric.min.js"></script>
<canvas id="canvas" width=300 height=300></canvas>

Answer 2

您可以使用多边形功能：

var pol = new fabric.Polygon([
  {x: 200, y: 0},
  {x: 250, y: 50},
  {x: 250, y: 100},
  {x: 150, y: 100},
  {x: 150, y: 50} ], {
    left: 250,
    top: 150,
    angle: 0,
    fill: 'green'
  }
);

对于更复杂的形状，您应该加载SVG