【Web前端问题】fabric.js 怎么画line？

var canvas = new fabric.Canvas('c');
var line = new fabric.Line([10, 20, 15, 10]);
canvas.add(line);

官网API已看过，第一个参数是表示两个点位置坐标的数组，第二个参数是一个对象，两个都是optional，但是就是显示不出来？

回答：

let line1 = new fabric.Line([lineleft, lineheight, lineleft, 0], 
{//终止位置，线长，起始位置，top，这里是从项目中截下来的我用了变量代替，你要用的话lineheight和lineleft用自己的变量或者数字代替。如果两个终止位置和起始位置的数值一样那么这个线条会垂直，这个应该很好理解。
  fill: '#5E2300',//填充颜色
  stroke: '#5E2300',//笔触颜色
  strokeWidth: 2,//笔触宽度
  hasControls: false, //选中时是否可以放大缩小
  hasRotatingPoint: false,//选中时是否可以旋转
  hasBorders:false,//选中时是否有边框
  transparentCorners:true,
  perPixelTargetFind:true,//默认false。当设置为true，对象的检测会以像互点为基础，而不是以边界的盒模型为基础。
  selectable:true,//是否可被选中
  lockMovementX: true,//X轴是否可被移动(true为不可，因为前缀是lock)
  lockMovementY: true,//Y轴是否可被移动(true为不可，因为前缀是lock)
});

至于stroke和fill的区别：
①外层的蓝色就是stroke笔触
②内层的绿色是fill填充
clipboard.png

另有fabric.js API翻译，来源CSDN merry05，感谢该作者的译文。
如果需要可以联系我

回答：

画一个[10,0,10,100]简单的线试试，把第二参也给上，只要不给fill属性应该没问题的。

回答：

有默认颜色选项的，你这样设置有报错吗？

回答：

var line = new fabric.Line([10, 10, 100, 100], {
  fill: 'green',
  stroke: 'green'
});
canvas.add(line);

以上是 【Web前端问题】fabric.js 怎么画line？ 的全部内容， 来源链接： utcz.com/a/136250.html

回到顶部