如何使用 fabric.js 在画布上画一条线

Posted 2023-03-24

【中文标题】如何使用 fabric.js 在画布上画一条线

【英文标题】：How to draw a line on a canvas using fabric.js

【发布时间】：2013-09-21 01:11:06

【问题描述】：

我正在使用 fabric.js 在画布上画一条线。这是我的代码，但我没有得到任何输出：

$("#Line").click(function() 
    // alert("Line");
    canvas.add(new fabric.Line([50, 100, 200, 200], 
        left: 170,
        top: 150,
        fill: 'red'
    ));
);

【参考方案1】：

简单的改变：你不能在fabric.js 中fill 一条带颜色的线。您必须使用带有颜色的stroke。

在sn-p下面的fill:'red'被stroke:'red'替换。

$("#Line").click(function () 
    // alert("Line");
    canvas.add(new fabric.Line([50, 100, 200, 200], 
        left: 170,
        top: 150,
        stroke: 'red'
    ));
);

【讨论】：

@sanjaynakate：如果您添加一些有关您的代码 sn-p 与 OP 的代码 sn-p 的不同之处的详细信息，我会 +1。因为问题或答案都不是很有用。请记住，这些答案旨在帮助他人，而不仅仅是 OP。谢谢！

@PaulSasik simple you can't fill:'red' line in fabric.js 我们必须使用 stroke:'red' 谢谢...

@sanjaynakate：是的，答案很简单，但我花了一段时间查看代码才发现其中的区别。顺便说一下，根据您的评论，查看我对您的答案的修改。

那个库太痛苦了......那种东西的文档在哪里？充满了错误。当我深入研究一个函数时，有一个错误。只是说，在寻找用fabricjs画线的时候，我能找到的最准确的答案就是这个帖子。如果可以的话，+10000 ^^

Fabric 很棒，但文档是我用过的最不友好的文档。仅仅试图确定一个方法采用什么参数可能是一个真正的球痛。例如，在the page for the Line() constructor 上，它甚至说明了点应该按什么顺序传递？