# @cniot/canvas2flex

> canvas绝对定位转flex布局

Latest version **0.0.12** (published 2022-03-03) · ISC license · 0 weekly downloads

## Install

```sh
npm install @cniot/canvas2flex
pnpm add @cniot/canvas2flex
yarn add @cniot/canvas2flex
bun add @cniot/canvas2flex
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.12 |
| Published | 2022-03-03 |
| First published | 2021-12-14 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 1.6 MB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | ricky.crq |
| Maintainers | rio7, wukidy, jun.lu, zhouhuan |
| Keywords | canvas, flex, absolute |

## Links

- npm: https://www.npmjs.com/package/@cniot/canvas2flex
- npm.io page: https://npm.io/package/@cniot/canvas2flex

## Dependencies (1)

- [lodash-es](https://npm.io/package/lodash-es.md) ^4.17.21

## Alternatives

- [exif-parser](https://npm.io/package/exif-parser.md) — 3.8M weekly downloads
- [vite-plugin-compression](https://npm.io/package/vite-plugin-compression.md) — 569.5K weekly downloads
- [pica](https://npm.io/package/pica.md) — 442.4K weekly downloads
- [@reportportal/client-javascript](https://npm.io/package/@reportportal/client-javascript.md) — 408.8K weekly downloads
- [@tldraw/state](https://npm.io/package/@tldraw/state.md) — 316.0K weekly downloads

## Recent versions

- 0.0.12 (latest) — 2022-03-03
- 0.0.11 — 2022-02-24
- 0.0.10 — 2022-01-19
- 0.0.9 — 2022-01-17
- 0.0.8 — 2021-12-24
- 0.0.7 — 2021-12-22
- 0.0.6 — 2021-12-21
- 0.0.5 — 2021-12-20
- 0.0.4 — 2021-12-15
- 0.0.3 — 2021-12-15
- 0.0.2 — 2021-12-15
- 0.0.1 — 2021-12-14

## README

## canvas画布中的绝对位置转换成flex布局，适应动态缩放能力

## TODO:
1. 抽离核心代码
2. fixed布局支持（重要）在canvasConfig里增加一个position参数
3. 绝对定位支持
4. 使用rollup打包
5. 最小最大高度解析
6. 自适应规则（宽度按照百分比来算，高度改成min-height）
7. 高度相等的时候，出现了丢元素的情况


## 使用方式

```javascript
import {transformMethod} from '@cniot/canvas2flex'
let res = transformMethod(data);
let {finalTransData} = res; // finalTransData里就包含了转换过后的所有数据
```

转换后字段含义：
```json
{
    "start":0, // 起始位置
    "end":36, // 终止位置
    "children":[], // 子元素列表
    "type":"horizontal", // 横切还是纵切
    "proportion":"0.05000", // 这个元素占这一层元素的比例（用来计算宽度百分比）
    "canvasConfig":{
      "y":0,
      "height":36
    },//起始位置和高度
    "level":1, // 层级
    "isFillComponent":true, // 是不是一个填充元素
    "flexLayout":{
    "display":"flex",
      "flexDirection":"row",
      "flexGrow":0,
      "flexShrink":0,
      "minWidth":"0px",
      "height":"36px"
    }, // 这个元素的样式
    "tagName":"div" //只要是填充元素，tagName就是div
}
```



## 更新日志
###0.0.11:
1. 增加zIndex布局支持
### 0.0.9:
1. 修复图片不显示的问题
2. 增加lockedWidth/lockedMarginRight/lockedMarginLeft 三个属性，用来锁定边距

---
_Source: https://npm.io/package/@cniot/canvas2flex · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._