fabric-texture
Version:
This JavaScript library enables fast and efficient image distortion transformations using Canvas 2D.
51 lines (31 loc) • 1.08 kB
Markdown
[**fabric-texture**](../../../../README.md)
***
# Function: calcFabricCanvasCoord()
> **calcFabricCanvasCoord**(`canvas`, `offset`): `Point`
将画布DOM坐标转换为 Fabric.js 画布坐标系中的坐标
在 Fabric.js 中，画布可能会被缩放、平移或变换，导致DOM坐标系和画布坐标系不一致。
此函数用于将鼠标事件或触摸事件中的DOM坐标转换为画布内的实际坐标。
## Parameters
### canvas
Fabric.js 画布实例
支持普通画布(Canvas)和静态画布(StaticCanvas)
`Canvas` | `StaticCanvas`
### offset
`Coord`
DOM坐标点
## Returns
`Point`
转换后的画布坐标点
## Example
```typescript
// 处理鼠标点击事件
canvas.on('mouse:down', (event) => {
const pointer = event.pointer;
const canvasPoint = calcFabricCanvasCoord(canvas, pointer);
console.log('画布坐标:', canvasPoint.x, canvasPoint.y);
});
```
## Remarks
- 如果画布未经变换，返回值与输入坐标基本相同
- 考虑了画布的缩放、平移和旋转等变换
- 当viewportTransform为null时使用默认矩阵