fabric.js 怎么画line?

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

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

阅读 12.4k
4 个回答
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);
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题