Question

我正在开发一个Angular项目，并且正在使用fabric.js库的canvas类创建带有渐变填充的圆。

使用fabric.Oject的setGradient函数时语法存在问题。我尝试了2种方法：1）在fabric-impl.d.ts中定义的方法，但是不起作用（我得到一个空的形状）。另一方面，如documentation example所示使用它，虽然可以工作，但会产生编译器错误。

复制步骤：

1）使用CLI（______ _____ ______ ______ /______\ /______\ /______\ /______\ 2 |Smith | 4 | Bond | 6 |Jones | 8 | Solo | -------- -------- -------- --------）创建一个新项目

2）使用npm（______ _____ ______ ______ /______\ /______\ /______\ /______\ 2 |Smith | 6 |Jones | 4 | Bond | 8 | Solo | -------- -------- -------- --------）
安装结构
3）使用npm（ng new）
安装结构类型
4）创建一个画布，创建一个圆并尝试在其上使用nmp install fabric   对象

创建画布和圆圈对象

npm install @types/fabric

IGradientOptions中定义的

setGradient

这不起作用（空形状），但不会在编译器中产生任何错误。

setGradient

setGradient，如文档所示

这确实起作用，但是会产生如下所示的错误。唯一的区别是坐标直接传递，而不是“ coords”选项传递。

        let nWidth:number = 300;
        let nHeight:number = 300;

        this.canvas = new fabric.Canvas('canvas', <any>{width: nWidth, height: nHeight, hoverCursor: 'auto'});
        let options: fabric.IObjectOptions = { left: 0, top: 0, originX: "left", originY: "top", objectCaching: false, selectable: false};      
        let circle: fabric.Circle = new fabric.Circle({radius: 150, fill: 'Blue', ...options});

第二个setGradient方法的错误

circle.setGradient('fill', {
            type: 'linear',
            coords:{
            x1: 0,
            y1: 0,
            x2: circle.width,
            y2: circle.height
            },
            colorStops: {
              0: "#0000FF",
              1: "#FF0000"
            }
          });

我是一个打字稿和angular的初学者，这只是一个猜测，但是在我看来，这是实际的以一种方式期望事物的结构模块与以不同方式定义的结构类型之间的冲突。我检查了package.json文件，这是安装后用于结构的文件：

        circle.setGradient('fill', {
            type: 'linear',
            x1: 0,
            y1: 0,
            x2: circle.width,
            y2: circle.height,
            colorStops: {
              0: "#0000FF",
              1: "#FF0000"
            }
          });

我尝试安装Fabric 3.0.0以匹配类型版本，但似乎没有什么不同。

谢谢！

Answer 1

好的，这已经有一段时间了，没有任何反应，所以我将发布解决方法，尽管它不是首选的解决方案。

因此，我刚刚在fabric-impl.d.ts文件中编辑了IGradientOptions接口，以反映fabric.js期望的结构。这样，编译器错误就消失了，代码也可以正常工作。

那时唯一的问题是，每次使用“ npm install”时，我都必须这样做，因为文件将重新下载为其原始格式。但是，这不是您经常执行的操作，我想它会在不久的将来通过类型文件的某些更新得到修复。

Answer 2

我有同样的问题。解决方案是派生打字稿存储库并推送更改。然后使用以下命令更新您的软件包：

npm install <ghusername>/<repoName>，其中<ghUsername>是您的GitHub用户名（不带@），<repoName>是存储库的名称。那应该正确安装它。您很可能希望在安装命令中使用--save或--save-dev标志，以将依赖项保存在package.json中。

如果要为社区进行修复，可以提交包含修复程序和版本标记的合并请求。

关于在Fabric对象上使用setGradient的IGradientOptions的编译器错误

创建画布和圆圈对象

setGradient

setGradient，如文档所示

第二个setGradient方法的错误

2 个答案: