当canvas画图的xy坐标超出画布时,截取画布大小内新的xy坐标

背景以及用法

由于业务需求，要求上传的点xy坐标均不能超出画布的宽高，并且画布上的某一些点位特别难画，比如全屏，某些边界点手动去画会导致不精准，所以我就写出这个可以截取画布大小内新的xy坐标的Function

Install:
npm i canvas-transform-xy

Usage
import canvasTransFormXY from "canvas-transform-xy"
let newPointArray=canvasTransFormXY(pointArray,width,height)

参数类型的描述:
1.(原坐标数组)pointArray:<{x:number,y:number}>[]
2.(画布宽度)width:number,
3.(画布高度)height:number

返回结果:
newPointArrays:最终截取画布内大小的坐标数组

编写Function思路

x坐标：

1.先用数组分别记录下超出画布宽度的x坐标的索引index（以下简称XList）和在画布内的x坐标的索引index（以下简称normalXList），再查看XList是否为空，如若空则直接返回本来传进来的数组，无需处理，否则进行下一步处理；

2.接下来把在画布内的点放在一个我们最后要返回的数组newXPointArray里面，把XList和normalXList循环对比，如果normalXList的item+1==XList的item或者XList的item+1==normalXList的item，则XList的item和normalXList的item与画布的高边界产生的交点，这个交点就是我们想要的截取的新的坐标，根据求交点y的公式：y=(y1-y0)/(x1-x0)*(width-x0)+y0,则可求得此交点坐标为(x1> 0 ? width : 0,y),关键的一步交点要按顺序插入newXPointArray中，顺序肯定不能错，一旦出错，会导致最终的图形连线出问题。

3.这里是做了2种情况处理：第一种：只有x坐标<0或者只有x坐标>width；第二种：有x坐标<0并有x坐标>width。XList的item是0或者是pointArray的最后一个index的插入顺序都是有差异的。

y坐标的思路和x坐标思路基本是一致的

具体可以去npm官网查看canvas-transform-xy源代码