javascript 用fabric.js画一条虚线

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/17784003/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 09:37:10  来源:igfitidea点击:

Drawing a dashed line with fabric.js

javascriptcanvasfabricjs

提问by Hartwig

I'd like to draw a dashed line using fabric.js. I've found Issue #603 on github that should implement this feature.However I didn't find any example code and can't get it to work with fabric.js 1.2.1.

我想用fabric.js 画一条虚线。 我在 github 上发现问题 #603 应该实现这个功能。但是我没有找到任何示例代码并且无法让它与 fabric.js 1.2.1 一起工作。

Is it already part of fabric.js 1.2.1 or do I have to get it off github directly and build it myself? Could someone provide me with a simple example to get me started?

它已经是 fabric.js 1.2.1 的一部分还是我必须直接从 github 上获取它并自己构建它?有人可以为我提供一个简单的例子来让我开始吗?

回答by Matěj G.

The property you're looking for is strokeDashArraywhich encodes the SVG attribute stroke-dasharray. It expects an array that describes the pattern of dashes and gaps, see the linked page for more details.

您要查找的属性是strokeDashArray对 SVG 属性进行编码的属性stroke-dasharray。它需要一个描述破折号和间隙模式的数组,有关更多详细信息,请参阅链接页面。

An example of usage may look like the following, which would create a dashed black line with equally spaced 5px fills:

使用示例可能如下所示,这将创建一条具有等距 5px 填充的黑色虚线:

new fabric.Line([0, 20, 100, 20], {
    strokeDashArray: [5, 5],
    stroke: 'black'
});