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获取子组件
$3
> render() 开始渲染 所有子组件都必须在render调用之前添加否则不渲染
> getCanvas(): HTMLCanvasElement 获取canvas
> toImage(): string 转成图片，返回一个Data URI scheme
> toBase64(): string 转成base64，返回一个base64字符串，无法直接在img显示
> toFile(filename: string = 'file'): File 转成file
$3
> setBgColor(bg: string) 设置背景颜色
> getBgColor(): string 获取背景颜色
> setRound(round: number) 设置圆角半径
> getRound(): number 获取圆角半径
> getDrawRound(): number 获取绘制中真实圆角半径
$3
> setSrc(src: string) 设置图片地址
> getSrc(): string 获取图片地址
$3
> 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
``
// or import MkView, { RectView } from 'mk-view';
``
!
image