鸿蒙-canvas-刮刮乐

文章目录

Android 中 canvas 能画出来的东西鸿蒙的 canvas 还画不了,不大可能吧?有个朋友问鸿蒙应用中想实现刮刮乐效果,应该咋画?这个问题,你能在 Android 上用 canvas 画出来,在鸿蒙里面用 canvas 画不出来?还是 api 不熟悉吧?

前提

这个就比较简单了。你先这样这样,然后再那样那样就行了。

好吧, 正式点,和Android没什么区别:

底层放一张图片或者其他什么控件都行。上面叠一层灰色canvas,手指滑动时记录一下路径,将路径上的颜色去除就行了。和手写签名唯一的区别:签名是按路径添加,刮刮乐是按路径移除。

会了的就不用往下看了,太长不想看的直接拖到最后看源码

基础

Android中的PorterDuff.Mode类似,在鸿蒙中也提供了11种不同的画布复合模式:

  1. source-over: (Default) Draws a new drawing on top of an existing canvas context. 在现有的画布上方绘制新的图形。也是默认行为。
  2. source-in: The new drawing is drawn only where the new drawing overlaps the target canvas.Everything else is transparent.新的图形只在与目标画布重叠的区域绘制,其他区域为透明。
  3. source-out: Draws a new drawing where it does not overlap with the existing canvas content. 在不与现有画布内容重叠的区域绘制新的图形。
  4. source-atop: The new drawing is drawn only where it overlaps the content of the existing canvas. 新的图形只在与现有画布内容重叠的区域绘制。
  5. destination-over: Draws a new graphic behind the existing canvas content. 在现有画布内容后面绘制新的图形。
  6. destination-in: Existing canvas content remains where the new drawing overlaps the existing canvas content.Everything else is transparent.仅在新的图形与现有画布内容重叠的区域保留现有画布内容,其他区域为透明。
  7. destination-out: Existing content remains where the new drawing does not overlap. 仅在新的图形不与现有画布内容重叠的区域保留现有内容。
  8. destination-atop: The existing canvas retains only the part that overlaps with the new drawing,which is drawn behind the canvas content. 现有画布仅保留与新的图形重叠的部分,并位于画布内容后面绘制。
  9. lighter: The color of two overlapping shapes is determined by adding the color values. 两个重叠形状的颜色通过相加颜色值来确定。
  10. copy: Only new graphics are displayed. 仅显示新的图形。
  11. xor: In the image, those overlaps and other places outside of the normal drawing are transparent. 在图像中,重叠部分和正常绘制范围之外的其他区域为透明。

看简介也可能是一脸懵,我们直接上代码看效果。先画一个红色的圆,之后设置globalCompositeOperation为不同的值,再画一个蓝色的正方形,直接看效果。

具体点将,就是红色圆形半径为画布的四分之一,圆心也在画布的四分之一处。蓝色正方形边长是圆形直径,左上角与圆心重合。

typescript 复制代码
@Component
struct CompositeOperationView{
  @Prop compositeOperation:string
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private canvasRendering: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  build() {
    Canvas(this.canvasRendering).width("100%").height("100%").onReady(() => {
      //获取画布宽高
      let canvasWidth = this.canvasRendering.width
      let canvasHeight = this.canvasRendering.height

      //计算圆心
      let circleX = canvasWidth/4
      let circleY = canvasHeight/4;
      let circleCenter = Math.min(circleX,circleY)

      //画红色圆形
      this.canvasRendering.fillStyle = "#FF0000"
      this.canvasRendering.arc(circleCenter,circleCenter,circleCenter,0,Math.PI * 2, false)
      this.canvasRendering.fill()

      //设置画布复合操作方式
      this.canvasRendering.globalCompositeOperation = this.compositeOperation

      //画蓝色正方形
      this.canvasRendering.fillStyle = "#0000FF"
      this.canvasRendering.fillRect(circleCenter, circleCenter, circleCenter*2, circleCenter*2)

    })
  }
}

export{CompositeOperationView}

这里一共有11种复合操作方式,为了方便对比,我们把这11种方式都画在同一个屏幕上。

因此,在CompositeOperationView中,我们将compositeOperation使用@Prop修饰,由父级控件传进来。

typescript 复制代码
@Entry
@Component
struct CanvasCompositeOperationPage{
  compositeOperation:string[]=["source-over","source-in","source-out","source-atop","destination-over","destination-in","destination-out","destination-atop","lighter","copy","xor"]
  build() {
    Flex({ direction: FlexDirection.Row, wrap: FlexWrap.Wrap, }){
      ForEach(this.compositeOperation,(item:string)=>{
        Column(){
          Text(item)
          CompositeOperationView({compositeOperation:item}).width("100%").height("80%")
        }.width("30%").height("20%")
      })
    }
  }
}

这里我们用ForEach循环来进行绘制,这里就不在过多介绍,不清楚的可以去看鸿蒙开发文档中的指南。

我们最终得到这样的一张图

这就一目了然了,我们可以选用destination-out来实现刮刮乐效果

刮刮乐效果

就和文章开始说的一样,先放一张图,然后canvas绘制蒙层,画布复合操作模式为destination-out,记录手指移动路径,绘制到canvas上,结束。

详细一点就是:

  1. 外层Stack层叠布局,子控件先放一个Image然后再放一个Canvas
  2. Canvas上我们可以绘制上纯颜色,也可以绘制另外一张图片
  3. 画布复合操作模式为destination-out
  4. 在Canvas的onTouch事件中,当TouchType.Move时,在当前坐标画一个小圆。
  5. 结束

按照这个思路,整体代码就是这样的

typescript 复制代码
@Preview
@Component
export struct ScratchOffView {
  private settings: RenderingContextSettings = new RenderingContextSettings(true)
  private canvasRendering: CanvasRenderingContext2D = new CanvasRenderingContext2D(this.settings)
  private path: Path2D = new Path2D()

  build() {
    Stack() {
      Image($r("app.media.cat"))
      Canvas(this.canvasRendering).width("100%").height("100%").onReady(() => {
        let canvasWidth = this.canvasRendering.width
        let canvasHeight = this.canvasRendering.height

        this.canvasRendering.fillStyle = "#aaf7f7f7"
        this.canvasRendering.fillRect(0, 0, canvasWidth, canvasHeight)

        this.canvasRendering.strokeStyle = "#00000000"
        this.canvasRendering.fillStyle = "#000000"
        this.canvasRendering.globalCompositeOperation = "destination-out"


      }).onTouch((event: TouchEvent) => {

        let path = new Path2D()
        let prex = 0
        let prey = 0
        switch (event.type) {
          case TouchType.Down:
            prex = event.touches[0].x
            prey = event.touches[0].y
            path.moveTo(prex, prey)
            break
          case TouchType.Move:
            this.path.moveTo(event.touches[0].x, event.touches[0].y)
            this.path.arc(event.touches[0].x, event.touches[0].y, 30, 0, Math.PI*2, false)
            this.canvasRendering.fill(this.path)
            
            break
          case TouchType.Up:
            break;
        }
      })
    }.width("100%").height("100%")

  }
}

最后放张效果图吧

总结

其实canvas并没有那么麻烦那么困难,我们只要熟悉了鸿蒙canvas的api,在Android上能实现的功能,鸿蒙能基本都能实现。比如手写签名、贝塞尔曲线、图片翻转、九宫格图片等等。

并不像我们想象中的那么困难,总之,先动手rua代码试试呗

总结

其实canvas并没有那么麻烦那么困难,我们只要熟悉了鸿蒙canvas的api,在Android上能实现的功能,鸿蒙能基本都能实现。比如手写签名、贝塞尔曲线、图片翻转、九宫格图片等等。

并不像我们想象中的那么困难,总之,先动手rua代码试试呗

相关推荐
zhanshuo44 分钟前
干掉复杂逻辑!手把手教你在鸿蒙系统中创建稳定的后台服务
harmonyos
zhanshuo44 分钟前
鸿蒙系统通知开发全攻略:实现跳转、自动消失、消息提醒的完整教程
harmonyos
问道飞鱼1 小时前
【移动端知识】移动端多 WebView 互访方案:Android、iOS 与鸿蒙实现
android·ios·harmonyos·多webview互访
周胡杰2 小时前
鸿蒙加载预置数据库-关系型数据库-如何读取本地/预制数据库
数据库·华为·harmonyos·鸿蒙
脑子缺根弦3 小时前
融合优势:SIP 广播对讲联动华为会议 全场景沟通响应提速
华为·音视频·广播对讲系统
迷曳12 小时前
27、鸿蒙Harmony Next开发:ArkTS并发(Promise和async/await和多线程并发TaskPool和Worker的使用)
前端·华为·多线程·harmonyos
呆呆的小鳄鱼16 小时前
牛客:HJ24 合唱队[华为机考][最长递增子集][动态规划]
算法·华为·动态规划
迷曳17 小时前
24、鸿蒙Harmony Next开发:不依赖UI组件的全局自定义弹出框 (openCustomDialog)
dialog·前端·ui·harmonyos·鸿蒙
DC_BLOG18 小时前
OSPFv3中LSA参数
运维·服务器·华为·智能路由器·huawei
平谷一勺1 天前
鸿蒙状态栏操作
华为·harmonyos·沉浸式状态栏