在 Fabric.js 中渲染多个图形以获取圆柱体

Question

亲爱的同学们！

我需要在 Fabric.js 中获取圆柱体。应该是一种形状。我尝试以这种方式解决问题。首先，我画两个椭圆和两条直线。您可以在文本下方看到这项工作的代码：

var canvas = new fabric.Canvas('c');
let width_changed = 4;


var eli_1 = new fabric.Ellipse({
    top: 150,
    left: 400,
   /* Try same values rx, ry => circle */
    rx: 75,
    ry: 50,
    fill: '',
    stroke: 'blue',
    strokeWidth: width_changed
});

var eli_2 = new fabric.Ellipse({
    top: 350,
    left: 400,
   /* Try same values rx, ry => circle */
    rx: 75,
    ry: 50,
    fill: '',
    stroke: 'blue',
    strokeWidth: width_changed
});



var line_2 = new fabric.Line([ 402, 200, 402, 400 ],{
      strokeWidth: width_changed,
      fill: 'blue',
      stroke: 'blue',
      originX: 'center',
      originY: 'center'
    });

var line_3 = new fabric.Line([ 552, 200, 552, 400 ],{
      strokeWidth: width_changed,
      fill: 'blue',
      stroke: 'blue',
      originX: 'center',
      originY: 'center'
    });

var shape_1 = new Array(eli_1,eli_2,line_2,line_3);
/*
var polyg_1 = new fabric.Polygon(shape_1[1], {
    top: 280,
    left: 290,
    fill: '',
    stroke: 'blue',
    strokeWidth: 2
});
*/

canvas.add(eli_1,eli_2,line_2,line_3);
//canvas.add(polyg_1);
canvas.renderAll();

<canvas id="c" width="800" height="630" style="border:1px dotted red"></canvas>

<script src="https://cdn.socket.io/4.4.0/socket.io.min.js" integrity="sha384-1fOn6VtTq3PWwfsOrk45LnYcGosJwzMHv+Xh/Jx5303FVOXzEnw0EpLv30mtjmlj" crossorigin="anonymous"></script>

<script src="https://unpkg.com/[email protected]/dist/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

as a result I want to get something like on figure.It should be one shape

当我尝试在一个形状中添加 4 个数字时：

var shape_1 = new Array(eli_1,eli_2,line_2,line_3);
/*
var polyg_1 = new fabric.Polygon(shape_1[1], {
    top: 280,
    left: 290,
    fill: '',
    stroke: 'blue',
    strokeWidth: 2
});

出现错误。我应该如何解决我的问题？

Answer 1

var canvas = new fabric.Canvas('c');
let width_changed = 4;


var eli_1 = new fabric.Ellipse({
    top: 150,
    left: 400,
   /* Try same values rx, ry => circle */
    rx: 75,
    ry: 50,
    fill: '',
    stroke: 'blue',
    strokeWidth: width_changed
});

var eli_2 = new fabric.Ellipse({
    top: 350,
    left: 400,
   /* Try same values rx, ry => circle */
    rx: 75,
    ry: 50,
    fill: '',
    stroke: 'blue',
    strokeWidth: width_changed
});



var line_2 = new fabric.Line([ 402, 200, 402, 400 ],{
      strokeWidth: width_changed,
      fill: 'blue',
      stroke: 'blue',
      originX: 'center',
      originY: 'center'
    });

var line_3 = new fabric.Line([ 552, 200, 552, 400 ],{
      strokeWidth: width_changed,
      fill: 'blue',
      stroke: 'blue',
      originX: 'center',
      originY: 'center'
    });

var group2 = new fabric.Group([ eli_1,eli_2,line_2,line_3 ], { left: 200, top: 200 });
canvas.add(group2);
canvas.renderAll();

<canvas id="c" width="800" height="630" style="border:1px dotted red"></canvas>

<script src="https://cdn.socket.io/4.4.0/socket.io.min.js" integrity="sha384-1fOn6VtTq3PWwfsOrk45LnYcGosJwzMHv+Xh/Jx5303FVOXzEnw0EpLv30mtjmlj" crossorigin="anonymous"></script>

<script src="https://unpkg.com/[email protected]/dist/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>