Cax

Small programs, small games and the Web general Canvas rendering engine

  • Lot – github.com/dntzhang/ca…
  • Comprehensive DEMO | movement DEMO
  • Small program DEMO is under review please look forward to
  • Small game DEMO is under review please look forward to

features

  • Learn Once, Write Anywhere(Apps, games, PC Web, Mobile Web)
  • Support for small programs, small games and Web browser rendering
  • Small programs, small games and the Web have the same compact, lightweight API
  • High performance rendering architecture
  • Super lightweight code volume
  • Loosely coupled rendering architecture
  • Support Canvas element management
  • Support for Canvas element event system
  • Turing-complete group nesting system
  • Built-in Tween athleticism
  • Built-in text, bitmaps, sequence frames, drawing objects and a variety of vector drawing objects
  • One minute entry small program CAX use
  • One minute introduction to the small game CAX use
  • One minute to get started using Web CAX
  • Built-in objects
    • Group
    • Bitmap
    • Sprite
    • Text
    • Graphics
    • Shape
      • Rect
      • Circel
      • Ellipse
    • Element
      • Button
  • attribute
    • Transform
    • Alpha
    • CompositeOperation
    • Cursor
  • The event
    • Applets event
    • Web event
  • movement
  • Custom object
    • The custom Shape
    • Custom Element
  • License

One minute entry small program CAX use

Download the caX custom component from GitHub, and then introduce the caX custom component:

└ ─ ─ cax ├ ─ ─ cax. Js ├ ─ ─ cax. Json ├ ─ ─ cax. WXML ├ ─ ─ cax. WXSS └ ─ ─ index, jsCopy the code

Declare dependencies in page or Component:

{
  "usingComponents": {
    "cax":".. /cax/cax"}}Copy the code

Introduce caX tags in WXML:

<cax id="myCanvas"></cax>
Copy the code

Render logic in JS:

import cax from '.. /cax/index'

Page({
  onLoad: function () {
    Pass this more than cax on the Web. This represents the Page or Component instance
    const stage = new cax.Stage(200.200.'myCanvas'.this)
    const rect = new cax.Rect(100.100, {
      fillStyle: 'black'
    })
    
    rect.originX = 50
    rect.originY = 50
    rect.x = 100
    rect.y = 100
    rect.rotation = 30

    rect.on('tap', () = > {console.log('tap')
    })

    stage.add(rect)
    stage.update()
  }
})
Copy the code

The effect is as follows:

In addition to tap events, you can also bind other touch events to recT:

rect.on('touchstart', () = > {console.log('touchstart')
})

rect.on('touchmove', () = > {console.log('touchmove')
})

rect.on('touchend', () = > {console.log('touchend')})Copy the code

One minute introduction to the small game CAX use

Go to GitHub to download the caX mini-game. The directory structure is as follows:

const stage = new cax.Stage()
Copy the code

Unlike applets and the Web, the mini game creates the Stage without passing any parameters.

One minute to get started using Web CAX

Obtained from NPM or CDN:

npm i cax
Copy the code
  • unpkg.com/cax@latest/…
  • unpkg.com/cax@latest/…
import cax from 'cax'

const stage = new cax.Stage(200.200.'#renderTo')
const rect = new cax.Rect(100.100, {
  fillStyle: 'black'
})

stage.add(rect)
stage.update()
Copy the code

Except that the Stage constructor is used the same way as the applets’ fourth argument, this.

Built-in objects

Group

For grouping, groups can also be nested groups. Attributes of the parent container are superimposed on child attributes, for example:

  • The x of the group is 100, the x of the bitmap in the group is 200, and the x of the final bitmap rendered to the stage is 300
  • The alpha of the group is 0.7, the alpha of the bitmap in the group is 0.6, and the alpha of the final bitmap rendered to the stage is 0.42
const group = new cax.Group()
const rect = new cax.Rect(100.100 {
  fillStyle: 'black'
})
group.add(rect)
stage.add(group)
stage.update()
Copy the code

Groups have the common add and remove methods for adding and removing elements. The ones that are added first will be drawn first, and all the ones that are added later will be overlaid.

Bitmap

const bitmap = new cax.Bitmap(img)
stage.add(bitmap)
stage.update()
Copy the code

If only the URL is passed instead of an instance of the Image object, it would look like this:

const bitmap = new cax.Bitmap('./wepay.png', ()=>{
  stage.update()
})
stage.add(bitmap)
Copy the code

Note that the small program needs to be configured with the downloadFile and the legal domain name to load the image.

You can set the clipped image display area, and other Transform properties:

bitmap.rect = [0.0.170.140]
bitmap.x = 200
Copy the code

Sprite

Sequence frame animation component that can combine any area of any picture into a series of animation.

const sprite = new cax.Sprite({
    framerate: 7.imgs: ['./mario-sheet.png'].frames: [
        // x, y, width, height, originX, originY ,imageIndex
        [0.0.32.32],
        [32 * 1.0.32.32],
        [32 * 2.0.32.32],
        [32 * 3.0.32.32],
        [32 * 4.0.32.32],
        [32 * 5.0.32.32],
        [32 * 6.0.32.32],
        [32 * 7.0.32.32],
        [32 * 8.0.32.32],
        [32 * 9.0.32.32],
        [32 * 10.0.32.32],
        [32 * 11.0.32.32],
        [32 * 12.0.32.32],
        [32 * 13.0.32.32],
        [32 * 14.0.32.32]],animations: {
        walk: {
            frames: [0.1]},happy: {
            frames: [5.6.7.8.9]},win: {
            frames: [12]}},playOnce: false.currentAnimation: "walk".animationEnd: function () {}});Copy the code

Text

Text object

const text = new cax.Text('Hello World', {
  font: '20px Arial'.color: '#ff7700'.baseline: 'top'
})
Copy the code

Graphics

A drawing object used to draw graphics using the basic concatenation Canvas instruction.

const graphics = new cax.Graphics()
graphics
    .beginPath()
    .arc(0.0.10.0.Math.PI * 2)
    .closePath()
    .fillStyle('#f4862c')
    .fill()
    .strokeStyle('black')
    .stroke()

graphics.x = 100
graphics.y = 200

stage.add(graphics)
Copy the code

Shape

Unlike Graphics, Shapes generally have a limited width and height, so they can be cached using an off-screen Canvas. These are part of our Shape.

Rect

const rect = new cax.Rect(200.100, {
  fillStyle: 'black'
})
Copy the code

Circel

const circel = new cax.Circel(10)
Copy the code

Ellipse

const ellipse = new cax.Ellipse(10)
Copy the code

Note: technically, small games and Web can create off-screen Canvas, but small programs cannot, because small programs do not support dynamic creation of off-screen Canvas.

Element

An Element is a composite image of various elements, such as Bitmap, Group, Text, Shape, etc.

Button

const button = new cax.Button({
  width: 100.height: 40.text: "Click Me!"
})
Copy the code

attribute

Transform

The property name describe
x The horizontal offset
y The vertical migration
scaleX The level of zoom
scaleY Vertical scaling
rotation rotating
skewX Skew X
skewY Skewed Y
originX Base point of rotation X
originY Rotation base Y

Alpha

The property name describe
alpha Transparency of elements

Notice that both father and son are set alpha to multiply.

compositeOperation

The property name describe
compositeOperation Overlay mode in which the source image is drawn onto the target image

Note that if a compositeOperation is not defined, it will look up and find the parent container with the latest compositeOperation defined as its compositeOperation.

Cursor

The property name describe
cursor Mouse up shape

The event

Applets event

The event name describe
tap Touch your finger and leave immediately
touchstart Finger touch begins
touchmove Fingers move after touch
touchend End of finger touch action
drag Drag and drop

Web event

The event name describe
click Triggered when a click occurs on the element
mousedown Triggered when the mouse button is pressed on the element
mousemove Triggered when the mouse pointer moves over an element
mouseup Triggered when the mouse button is released on the element
mouseover Triggered when the mouse pointer moves over an element
mouseout Triggered when the mouse pointer moves out of the element
tap Touch your finger and leave immediately
touchstart Finger touch begins
touchmove Fingers move after touch
touchend End of finger touch action
drag Drag and drop

movement

Cax has the ability to write motion effects in a concatenated fashion:

cax.To.get(bitmap)
    .to()
    .y(240.2000, cax.easing.elasticInOut)
    .rotation(240.2000, cax.easing.elasticInOut)
    .end(function () {
        console.log(" task one has completed!")
    })
    .wait(500)
    .to()
    .rotation(0.1400, cax.easing.elasticInOut)
    .end(function () {
        console.log(" task two has completed!")
    })
    .wait(500)
    .to()
    .scaleX(1.1400, cax.easing.elasticInOut)
    .scaleY(1.1400, cax.easing.elasticInOut)
    .end(function () {
        console.log(" task three has completed!")
    })
    .start()
Copy the code

Of course, the set method can also support the movement of arbitrary attributes, such as:

.set('y'.240.2000, cax.easing.elasticInOut)
Copy the code

Is equivalent to

.y(240.2000, cax.easing.elasticInOut)
Copy the code

Demo address

Custom object

The custom Shape

Custom Shape inherits from cax.Shape:

class Sector extends cax.Shape {
  constructor (r, from, to, option) {
    super(a)this.option = option || {}
    this.r = r
    this.from = from
    this.to = to
  }

  draw () {
    this.beginPath()
      .moveTo(0.0)
      .arc(0.0.this.r, this.from, this.to)
      .closePath()
      .fillStyle(this.option.fillStyle)
      .fill()
      .strokeStyle(this.option.strokeStyle)
      .lineWidth(this.option.lineWidth)
      .stroke()
  }
}
Copy the code

The use of Shape:

const sector = new Sector(10.0.Math.PI/6, {
  fillStyle: 'red'
  lineWidth: 2
})
stage.add(sector)
stage.update()
Copy the code

Custom Element

Custom Element inherited from cax.group:

class Button extends cax.Group {
  constructor (option) {
    super(a)this.width = option.width
    this.roundedRect = new  cax.RoundedRect(option.width, option.height, option.r)
    this.text = new cax.Text(option.text, {
      font: option.font,
      color: option.color
    })

    this.text.x = option.width / 2 - this.text.getWidth() / 2 * this.text.scaleX
    this.text.y = option.height / 2 - 10 + 5 * this.text.scaleY
    this.add(this.roundedRect, this.text)
  }
}

export default Button
Copy the code

Use:

const button = new cax.Button({
  width: 100.height: 40.text: "Click Me!"
})
Copy the code

In general, it is recommended to use inheritance from Group for more complex assemblages, which is convenient for scaling and managing its own internal components. It can be seen that Player, Bullet, Enemy and Background in the DEMO of small games are all inherited from Group.

License

MIT