前言
本文基于Api13
在之前的文章中,我们主要针对Pen对象做了概述,知道了Pen对象主要用于修改绘制图形的轮廓信息,如果你想要实现一个实心的效果,那么就必须需要Brush对象了。
我们还是拿着前边的案例代码做演示,使用Brush对象来实现一个修改颜色的效果:
TypeScript
@Entry
@Component
struct DemoPage {
private context: DrawingRenderingContext = new DrawingRenderingContext()
build() {
Canvas(this.context)
.width("100%")
.height("100%")
.onReady(() => {
//创建Brush对象
const brush = new drawing.Brush()
//设置设置ARGB格式颜色
brush.setColor(255, 255, 0, 0)
//绑定画笔给画布
this.context.canvas.attachBrush(brush)
//绘制圆形
this.context.canvas.drawCircle(200, 200, 100)
//使组件无效,触发组件的重新渲染。
this.context.invalidate()
})
}
}
效果如下:
上边可以看到和Pen对象有着明显的区别,Pen对象是边框,这里绘制的是一个实心。
Brush对象
和Pen对象的实现方式一致,都是通过new来创建,主要用于描述所绘制图形的填充信息。
TypeScript
//创建Brush对象
const brush = new drawing.Brush()
Brush对象主要方法
设置画笔颜色
和Pen对象一致,设置画笔颜色都是提供了提供了两个方法:
一个是common2D.Color对象形式。
TypeScript
setColor(color: common2D.Color): void;
一个是直接设置ARGB格式颜色。
TypeScript
setColor(alpha: number, red: number, green: number, blue: number): void;
也是和Pen对象一样,由于性能是优于第一个,所以在以后的开发中,建议直接使用第二个。
我们把前言中的案例改下颜色:
TypeScript
//创建Brush对象
const brush = new drawing.Brush()
//设置设置ARGB格式颜色
brush.setColor(100, 200, 100, 0)
//绑定画笔给画布
this.context.canvas.attachBrush(brush)
//绘制圆形
this.context.canvas.drawCircle(200, 200, 100)
//使组件无效,触发组件的重新渲染。
this.context.invalidate()
可以看到,颜色已经发生了变化:
是否开启抗锯齿setAntiAlias
和Pen对象中的一致,都是通过setAntiAlias设置抗锯齿,开启后,可以使得图形的边缘在显示时更平滑。
我们可以看下效果对比,未开启:
设置抗锯齿:
TypeScript
//设置抗锯齿
brush.setAntiAlias(true)
看下效果,明显的平滑了很多。
设置透明度setAlpha
通过setAlpha设置画笔的透明度,参数选取范围在[0, 255]区间内的整数值。
比如,我设置了透明度为60。
TypeScript
//设置透明度
brush.setAlpha(30)
我们看下效果:
除了以上的方法之外,还有一些不常用的方法,下面一起做一个简单总结。
方法 | 参数 | 概述 |
---|---|---|
setColorFilter | ColorFilter | 用于给画刷添加额外的蒙版滤镜。 |
setMaskFilter | MaskFilter | 用于给画笔添加额外的蒙版滤镜。 |
shaderEffect | ShaderEffect | 设置画刷着色器效果。 |
setShadowLayer | ShadowLayer | 阴影层对象。为null时表示清空阴影层效果。 |
setBlendMode | BlendMode | 用于设置画刷的混合模式。 |
setJoinStyle | JoinStyle | 用于设置画笔绘制转角的样式。 |
setImageFilter | ImageFilter/null | 为画刷设置图像滤波器。 |
除了设置一些属性之外,也提供了一些方法,可以获取一些属性。
方法 | 返回值 | 概述 |
---|---|---|
getMiterLimit | number | 获取折线尖角的限制值。 |
getColorFilter | ColorFilter | 获取画刷的颜色滤波器。 |
getColor | common2D.Color | 获取画刷的颜色。 |
isAntiAlias | boolean | 获取画刷是否开启抗锯齿属性。 |
getAlpha | number | 获取画刷的透明度。 |
reset | void | 重置当前画笔为初始状态。 |
相关总结
Brush对象主要适用于绘制图形的填充信息,可以修改的有,颜色,是否抗锯齿,透明度等属性,相对比Pen对象,少了几个属性,不过基本上也满足了日常的需求。