# mk-view

**Repository Path**: hxyl/mk-view

## Basic Information

- **Project Name**: mk-view
- **Description**: No description available
- **Primary Language**: TypeScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-05-08
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

mk-view

# 使用canvas自定义布局

## 所有组件共有方法

> setX(x: number) 设置组件X抽坐标,一般情况下不需要调用

> getX(): number 获取组件X抽坐标

> setY(y: number) 设置组件Y抽坐标

> getY(): number 获取组件Y抽坐标

> setWidth(w: number) 设置组件宽度

> getWidth(): number 获取组件宽度

> setHeight(h: number) 设置组件高度

> getHeight(): number 获取组件高度

> setPaddingTop(p: number) 设置顶部内边距

> getPaddingTop(): number 获取顶部内边距

> setPaddingRight(p: number) 设置右边内边距

> getPaddingRight(): number 获取右边内边距

> setPaddingBottom(p: number) 设置底部内边距

> getPaddingBottom(): number 获取底部内边距

> setPaddingLeft(p: number) 设置左边内边距

> getPaddingLeft() 获取左边内边距

> setOrientation(o: 'horizontal' | 'vertical') 设置子组件排序方式

> getOrientation():'horizontal' | 'vertical' 获取子组件排序方式

> setVerticalCenter(center: boolean) 设置子组件是否垂直居中

> getVerticalCenter(): boolean 获取子组件是否垂直居中

> setHorizontalCenter(center: boolean) 设置子组件是否水平居中

> getHorizontalCenter(): boolean 获取子组件是否水平居中

> openPercentageMode() 打开百分比布局方式，打开后宽度高度和文本行高将会根据父组件的宽高百分比来计算

> getIsPercentageMode() 获取百分比布局方式

> getDrawX() 获取绘制中真实X抽坐标

> getDrawY() 获取绘制中真实Y抽坐标

> getDrawWidth() 获取绘制中真实宽度

> getDrawHeight() 获取绘制中真实高度

> getDrawPaddingTop() 获取绘制中真实顶部内边距

> getDrawPaddingRight() 获取绘制中真实右边内边距

> getDrawPaddingBottom() 获取绘制中真实底部内边距

> getDrawPaddingLeft() 获取绘制中真实左边内边距

> addView(view) 添加子组件

> getChilds():View[] 获取所有的子组件

> getChildByTag(tag: string): View 根据tag获取子组件

### MkView() 根组件
> render() 开始渲染 所有子组件都必须在render调用之前添加否则不渲染

> getCanvas(): HTMLCanvasElement 获取canvas

> toImage(): string 转成图片，返回一个Data URI scheme

> toBase64(): string 转成base64，返回一个base64字符串，无法直接在img显示

> toFile(filename: string = 'file'): File 转成file

### RectView(tag: string) 矩形组件
> setBgColor(bg: string) 设置背景颜色

> getBgColor(): string 获取背景颜色

> setRound(round: number) 设置圆角半径

> getRound(): number 获取圆角半径

> getDrawRound(): number 获取绘制中真实圆角半径

### ImageView(tag: string) 图片组件
> setSrc(src: string) 设置图片地址

> getSrc(): string 获取图片地址

### TextView(tag: string) 文本组件
> setText(text: string) 设置文字

> getText(): string 获取文字

> setColor(color: string) 设置文字颜色

> getColor(): string 获取文字颜色

> setLineHeight(lineHeight: number) 设置行高

> getLineHeight(): number 获取行高

> setFontFamily(fontFamily: string) 设置字体

> getFontFamily(): string 获取字体

> setFontSize(fontSize: number) 设置字体大小

> getFontSize(): number 获取字体大小

> getDrawFontSize() 获取绘制中真实字体大小

> getDrawLineHeight() 获取绘制中真实行高


> demo
```
<script src="./js/bundle.umd.js"></script> // or import MkView, { RectView } from 'mk-view';
<script>
    var view = new MK.MkView();
    view.setWidth(200);
    view.setHeight(200);
    var lastChild;
    for (var i = 1; i <= 10; i++) {
        var rect = new MK.RectView('tag' + i);
        rect.openPercentageMode();
        rect.setWidth(90);
        rect.setHeight(90);
        rect.setBgColor('#' + Math.floor((Math.random() * 10000000)).toString(16));
        rect.setHorizontalCenter(true);
        rect.setVerticalCenter(true);
        if (lastChild) {
            rect.addView(lastChild);
        }
        lastChild = rect;
    }
    view.addView(lastChild);
    view.setHorizontalCenter(true);
    view.setVerticalCenter(true);
    view.render();
    console.log(view)
    document.body.appendChild(view.getCanvas());

</script>

```

![image](http://chuantu.xyz/t6/732/1588989732x992248267.jpg)