AILabel修改源码添加旋转功能 和修改源码后,同步到仓库,可以方便组员维护的方法

目录

AILabel修改源码添加旋转功能

2.修改源码后,同步到仓库,可以方便组员维护的方法

---

AILabel修改源码添加旋转功能

在项目中使用AILabel完成图片添加标签功能,需要给绘画的标签添加旋转功能, 

由于AILabel没有旋转功能,我就修改了源码添加了一个旋转功能。

使用也很方便,在shape添加一个rotation属性就可以达到旋转功能。

有兴趣的朋友可以看看

 附上源码:

{
      key: "drawRect",
      value: function drawRect(ctx, shape, style, option) {
        var _ref2 = option || {},
          format = _ref2.format;

        var stroke = isBoolean_1(style.stroke) ? style.stroke : true;
        var fill = isBoolean_1(style.fill) ? style.fill : false;
        var formatShape = isFunction_1(format) ? format(shape) : shape;
        var startX = formatShape.x,
          startY = formatShape.y,
          width = formatShape.width,
          height = formatShape.height;
        var endX = startX + width;
        var endY = startY + height; // 矩形点.
        // console.log(shape)
        // var rotation = formatShape.rotation || 0;
        var rotation = shape.rotation || 0;
        // console.log(rotation)
        // console.log(formatShape.rotation)
        // console.log(formatShape)
        var rotatePoint = function (point, center, angle) {
          let cx = center.x, cy = center.y;
          let px = point.x - cx, py = point.y - cy;
          let cos_a = Math.cos(angle / 180 * Math.PI), sin_a = Math.sin(-angle / 180 * Math.PI);
          let dx = cos_a * px + sin_a * py + cx, dy = -sin_a * px + cos_a * py + cy;
          return { x: dx, y: dy }
        }
        let center = { x: startX + width / 2, y: startY + height / 2 };

        var rectPoints = [
          rotatePoint({ x: startX, y: startY }, center, rotation),
          rotatePoint({ x: endX, y: startY }, center, rotation),
          rotatePoint({ x: endX, y: endY }, center, rotation),
          rotatePoint({ x: startX, y: endY }, center, rotation)
        ];
        Graphic.drawPolygon(ctx, rectPoints, style, {
          fill: fill,
          stroke: stroke
        });
      }

2.修改源码后,同步到仓库,可以方便组员维护的方法

可以使用 patch-package

​
1. 安装 
npm i patch-package


2. 修改 node_modules
修改完后输入命令

npx patch-package 修改的包名


如改动了 node_modules/element-ui则输入

npx patch-package node_modules/element-ui

随后就会在项目的根目录下出现 patches 这个目录，里面会出现修改包的补丁文件（需要将该目录及文件一同上传到代码仓库）

3. postinstall hook 自动执行patch-package
在 package.json 的 script 中添加指令

"postinstall": "patch-package"

该命令的作用当更新项目的依赖的时候，会自动在依赖安装完后执行 patch-pacakge 命令

随后会找到patches目录下的补丁文件，将对应的node_moduels更改，这样就可以做到组内同步修改的代码

​