DEV Community

wei chang
wei chang

Posted on

A case of implementing a drawing board with the Cangjie development language in HarmonyOS NEXT

Good morning, everyone. Today, I'd like to share a case of a drawing board implemented with the language developed by Cangjie.

Recently, there have been many classmates saying that I wrote ArkTS to impersonate Cangjie. To prove my innocence, I took a screenshot for everyone to see. It is indeed a Cangjie file:

Image description

Cangjie provided the Canvas component Canvas. All our drawing work needs to be carried out on the Canvas, so first add a large enough canvas component on the page:

Canvas(this.context)
.backgroundColor(0xffff00)
.width(100.percent)
.height(100.percent)
Enter fullscreen mode Exit fullscreen mode

Looking at the code above, you might ask what this.context is. Youlan Jun compares it to a paintbrush. When using the paintbrush to paint on the canvas, context can draw graphics, text, pictures and other contents. The style of the brush can be modified, such as thickness, color, etc.

var settings: RenderingContextSettings = RenderingContextSettings(antialias: true)
var context: CanvasRenderingContext2D = CanvasRenderingContext2D(this.settings)
var path2Db: Path2D = Path2D()


protected open func onPageShow(){
  context.lineWidth(5)
  context.strokeStyle(0x0000ff)
}
Enter fullscreen mode Exit fullscreen mode

What we do today is to let the paintbrush follow the trajectory we have touched to draw curves.

Image description

To fulfill this requirement, first of all, we need to know the trajectory coordinates of the drawing country so that we can draw accurately on the canvas.

To make the drawing more accurate, I used the Bezier curve three times. Thus, I needed to record at least two points and then pass the midpoint of this point into the coordinates of the Bezier curve as well.

Touch sliding events can use onTouch. There are several types of onTouch events, such as Down, Move, etc. In Cangjie, I used an unconventional way to determine the type:

.onTouch({e:TouchEvent =>
    var pointX = e.touches[0].x;
    var pointY = e.touches[0].y;
    if(e.eventType.toString() == 'Move'){
            let curX = (pointX + this.pointX1)/Float64(2)
            let curY = (pointY + this.pointY1)/Float64(2)
            this.path2Db.bezierCurveTo(this.pointX1,this.pointY1,this.pointX2,this.pointY2,curX,curY)
            this.pointX1 = pointX
            this.pointY1 = pointY
            this.pointX2 = curX
            this.pointY2 = curY
            this.context.stroke(this.path2Db)
    }else if(e.eventType.toString() == 'Down'){
         this.path2Db.moveTo(e.touches[0].x, e.touches[0].y);
            this.pointX1 = pointX
            this.pointY1 = pointY
            this.pointX2 = pointX
            this.pointY2 = pointY
        }
    })
Enter fullscreen mode Exit fullscreen mode

After achieving the drawing of curves, the clearRect method can be used to clear the canvas.

Button('清空').onClick({e =>  
    this.context.clearRect(0, 0, 3000, 3000)
  })
Enter fullscreen mode Exit fullscreen mode

Such a simple drawing board effect has been achieved. Thank you for reading.

Top comments (0)