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>