cax

Bahasa Inggris | 简体中文

Cax

Mesin Rendering Canvas 2D

Fitur

• API sederhana, ringan dan berkinerja tinggi
• Mendukung PC dan Mobile Canvas 2D Rendering dan Mouse and Touch Event
• Dukungan acara elemen dan manajemen elemen seperti DOM
• Turing Sistem bersarang grup lengkap
• Transformasi Klip dan Klip Dukungan
• Teks bawaan, bitmap, sprite, grafik dan bentuk
• Dukung rendering jalur SVG
• Mendukung filter CSS
• Gambar built-in loader
• Perpustakaan gerak lintas platform bawaan → to2to

Demo

• Wechart oleh cax
• Sederhana
• Animasi
• Klip
• Transformasi Klip
• Transisi Klip
• TO2TO
• Mengayun
• Cax + materi
• Diagram lingkaran
• Untuk + bentuk
• Penglihatan
• Cache
• Menyaring
• SVG
• Grafik
• Operasi Komposit
• Cax + Dragonbones

→ kode sumber demo

Dokumen

• Memulai
• Objek bawaan
  • Kelompok
    • Metode
      • menambahkan
      • menghapus
      • kosong
      • mengganti
  • Panggung
    • Metode
      • memperbarui
      • ScaleEventPoint
    • Menopang
      • Disablemovedetection
      • MovingetectionInterval
  • Bitmap
    • Menopang
      • rect
  • Sprite
    • Metode
      • gotoandplay
      • gotoandstop
      • gotoandplayonce
  • Teks
    • Metode
      • Getwidth
  • Grafik
  • Membentuk
    • Rect
    • Lingkaran
    • Elips
  • Elemen
    • Tombol
• Milik
  • Mengubah
  • Alfa
  • Poperasi Komposit
  • Kursor
  • Tetap
  • Bayangan
  • Panggung
• Metode
  • menghancurkan
• Peristiwa
• Gerakan
• Klip
• Objek khusus
  • Bentuk khusus
  • Elemen khusus
• Siapa yang menggunakan CAX?
• Lisensi

Memulai

Dapatkan CAX melalui NPM atau CDN:

npm i cax

• https://unpkg.com/cax@latest/dist/cax.min.js
• https://unpkg.com/cax@latest/dist/cax.js

Penggunaan:

 import cax from 'cax'

const stage = new cax . Stage ( 200 , 200 , 'body' )

cax . loadImgs ( {
  imgs : [ './test.jpg' ] ,
  complete : ( imgs ) => {
    const img = imgs [ 0 ]
    const bitmap = new cax . Bitmap ( img )

    bitmap . x = stage . width / 2
    bitmap . y = stage . height / 2
    bitmap . rotation = - 10
    bitmap . originX = img . width / 2
    bitmap . originY = img . height / 2
    bitmap . filter ( 'blur(10px)' )

    stage . add ( bitmap )
    stage . update ( )
  }
} ) 

Objek bawaan

Kelompok

Untuk pengelompokan, kelompok juga dapat bersarang kelompok, dan sifat wadah induk akan ditumpangkan pada sifat anak, seperti:

• X dari grup adalah 100, x bitmap dalam grup adalah 200, dan x bitmap yang diberikan ke panggung adalah 300.
• Alpha grup adalah 0,7, alpha bitmap dalam grup adalah 0,6, dan alpha bitmap yang diberikan ke panggung adalah 0,42.

 const group = new cax . Group ( )
const rect = new cax . Rect ( 100 , 100 , {
  fillStyle : 'black'
} )
group . add ( rect )
stage . add ( group )
stage . update ( )

Grup telah digunakan secara umum add dan remove metode untuk menambah dan menghapus elemen. Tambahan pertama akan ditarik terlebih dahulu, dan semua penambahan berikutnya akan ditutup di atas tambah atas.

Metode grup

menambahkan

Tambahkan Anak ke Kelompok

 groupObj . add ( child ) 

menghapus

Hapus anak dari kelompok

 groupObj . remove ( child ) 

kosong

Hapus semua anak dari kelompok

 groupObj . empty ( ) 

mengganti

Ganti anak dengan OBJ lain

 groupObj . replace ( current , prev )

Panggung

Tahap adalah wadah top terbesar yang diwarisi dari grup, jadi memiliki semua metode dan alat peraga kelompok.

Metode panggung

memperbarui

Elemen apa pun tidak dapat dilihat di atas panggung. Anda harus menjalankan metode pembaruan.

 stage . update ( )

Properti elemen apa pun dimodifikasi. Harap lakukan panggung.update () untuk memperbarui panggung, atau memasukkannya ke dalam timer.

 cax . tick ( stage . update . bind ( stage ) ) 

ScaleEventPoint

Ketika ketinggian kanvas dan piksel kanvas bukan satu-ke-satu, posisi pemicu peristiwa tidak akurat, dan Anda dapat menggunakan metode ScaleEventPoint untuk membuat acara tersebut benar.

 //The width of the canvas is half the canvas pixel
stage . scaleEventPoint ( 0.5 , 0.5 )

Contoh: https://github.com/dntzhang/cax/blob/master/packages/cax/examples/pie/main.js#l218-l220

Prop tahap

Disablemovedetection

Nonaktifkan Deteksi Acara untuk Mouse atau Touch Mobile. Nilai default di web salah. Anda dapat mengubahnya:

 stage . disableMoveDetection = true 

MovingetectionInterval

Atur interval deteksi TouchMove dan Mousemove dengan MovingetectionInterval.

 //check twice in one second
stage . moveDetectionInterval = 500

Bitmap

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

Jika Anda hanya mengirimkan URL alih -alih contoh objek gambar, Anda perlu melakukan ini:

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

bitmap-prop

rect

Anda dapat mengatur area tampilan kliping gambar, dan atribut transformasi lainnya:

 bitmap . rect = [ 0 , 0 , 170 , 140 ]
bitmap . x = 200
bitmap . rotation = 30

Sprite

Komponen animasi bingkai urutan dapat menggabungkan wilayah apa pun dari gambar apa pun menjadi serangkaian animasi.

 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 ( ) {

    }
} ) ; 

Metode Sprite

gotoandplay

Lompat ke nama animasi saat ini dan mulailah bermain

 spriteObj . gotoAndPlay ( animationName ) 

gotoandstop

Lompat ke nama animasi saat ini dan berhenti

 spriteObj . gotoAndStop ( animationName ) 

gotoandplayonce

Lompat ke nama animasi saat ini dan mulailah bermain, lalu hancurkan diri Anda setelah animasi. Sering digunakan dalam ledakan

 spriteObj . gotoAndPlayOnce ( animationName )

Teks

Objek teks

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

Metode

Getwidth

Dapatkan lebar teks

 textObj . getWidth ( )

Grafik

Objek gambar digunakan untuk menggambar grafik dengan instruksi kanvas dengan cara tautan dasar.

 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 )

Secara khusus, jika Anda melakukan operasi rendering koneksi grafis dalam satu loop, pastikan untuk menambahkan metode clear (), atau jalur akan kelebihan beban ke browser Anda:

 cax . setInterval ( function ( ) {
  graphics
    . clear ( )
    . beginPath ( )
    . arc ( 0 , 0 , 10 , 0 , Math . PI * 2 )
    . stroke ( )
} , 16 )

Membentuk

Tidak seperti grafik, bentuk biasanya memiliki ketinggian lebar terbatas, sehingga dapat disangga dengan kanvas di luar layar. Berikut ini adalah bentuk.

Rect

 const rect = new cax . Rect ( 200 , 100 , {
  fillStyle : 'black'
} ) 

Lingkaran

 const circle = new cax . Circle ( 10 ) 

Elips

 const ellipse = new cax . Ellipse ( 120 , 20 )

Elemen

Elemen adalah kombinasi dari beberapa elemen, seperti bitmap, grup, teks, bentuk dan gambar campuran lainnya.

Tombol

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

Milik

Mengubah

nama	Menggambarkan
X	Offset horizontal
y	Offset vertikal
scalex	Penskalaan horizontal
skala	Penskalaan vertikal
skala	Penskalaan horizontal dan vertikal
rotasi	rotasi
skewx	skewx
miring	miring
Originx	Titik dasar rotasi x
originy	Titik dasar rotasi y

Alfa

Nama	Menggambarkan
alfa	Transparansi elemen

Perhatikan bahwa ayah dan anak telah mengatur Alpha untuk melakukan penumpukan multiplikasi.

Poperasi Komposit

Nama	Menggambarkan
Poperasi Komposit	Pola superposisi yang ditarik dari gambar sumber ke gambar target

Perhatikan bahwa jika Anda tidak memiliki definisi operasi komposit untuk dilihat, temukan wadah induk komposit operasi terdekat sebagai operasi kompositnya sendiri.

Kursor

Nama	Menggambarkan
kursor	Bentuk tikus

Tetap

Nama	Menggambarkan
tetap	Apakah untuk diperbaiki atau tidak, standarnya salah, dan diatur ke true tidak akan menutupi transformasi leluhur.

Bayangan

Nama	Menggambarkan
bayangan	bayangan

Penggunaan:

 obj . shadow = {
    color : '#42B035' ,
    offsetX : - 5 ,
    offsetY : 5 ,
    blur : 10
}

Panggung

Nama	Menggambarkan
panggung	Dapatkan Tahap Akar

Penggunaan:

 obj . stage 

Metode

menghancurkan

Menghancurkan diri sendiri

 obj . destroy ( ) 

Peristiwa

Nama	Menggambarkan
klik	Klik pemicu waktu pada elemen
mousedown	Memicu saat tombol mouse ditekan pada elemen
mousemove	Memicu saat penunjuk mouse bergerak ke elemen
mouseup	Pemicu saat tombol mouse dilepaskan pada elemen
Mouseover	Memicu saat penunjuk mouse bergerak ke elemen
mouseout	Memicu saat penunjuk mouse keluar dari elemen
mengetuk	Tinggalkan jari dan pergi segera
TouchStart	Awal aksi sentuh jari
Touchmove	Pindahkan jari demi sentuhan
Touchend	Akhir aksi sentuh jari
menyeret	Seret dan lepas

 const handler = ( ) => { }
obj . on ( 'click' , handler )

//unbind
obj . off ( 'click' , handler ) 

Gerakan

CAX memiliki kemampuan bawaan untuk menulis efek gerak secara terus menerus.

 const easing = cax . To . easing . elasticInOut

cax . To . get ( bitmap )
    . to ( { y : 340 , rotation : 240 } , 2000 , easing )
    . begin ( ( ) => {
        console . log ( "Task one has began!" )
    } )
    . progress ( ( ) => {
        console . log ( "Task one is progressing!" )
    } )
    . end ( ( ) => {
        console . log ( "Task one has completed!" )
    } )
    . wait ( 500 )
    . to ( )
    . rotation ( 0 , 1400 , easing )
    . begin ( ( ) => {
        console . log ( "Task two has began!" )
    } )
    . progress ( ( ) => {
        console . log ( "Task two is progressing!" )
    } )
    . end ( ( ) => {
        console . log ( "Task two has completed!" )
    } )
    . start ( ) ;

• to dan to paralel
• to dan wait serial
• Serial antara to dan to adalah serial dengan to to

Jika Anda menginginkan gerakan melingkar, Anda dapat menggunakan metode cycle :

 cax . To . get ( bitmap )
    . to ( )
    . y ( 340 , 2000 , cax . easing . elasticInOut )
    . to
    . y ( 0 , 2000 , cax . easing . elasticInOut )
    . cycle ( )
    . start ( )

• → demo gerak
• → Paket TO2TO
• → cax.to.easing

Penting untuk dicatat bahwa, tidak seperti Tween.js, Cax menggunakan unta. Misalnya, kubik.

Klip

 const stage = new cax . Stage ( 600 , 400 , 'body' )
const bitmap = new cax . Bitmap ( './wepay-diy.jpg' , ( ) => {
    stage . update ( )
} )
const clipPath = new cax . Graphics ( )
clipPath . arc ( 40 , 40 , 25 , 0 , Math . PI * 2 )
bitmap . clip ( clipPath )
stage . add ( bitmap )

Anda bisa mendapatkan efek yang sama dengan kode pukulan:

 const clipPath = new cax . Graphics ( )
clipPath . x = 40
clipPath . y = 40
clipPath . arc ( 0 , 0 , 25 , 0 , Math . PI * 2 )

Jadi Anda dapat menemukan bahwa grafik klip mendukung semua alat peraga transformasi (x, y, skala, skala, rotasi, skewx, skewy, originx, originy).

→ Demo klip

Objek khusus

Bentuk khusus

Bentuk kustom mewarisi dari cax.shape:

 class Sector extends cax . Shape {
  constructor ( r , from , to , option ) {
    super ( )

    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 ( )
  }
}

Gunakan bentuknya:

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

Elemen khusus

Elemen khusus mewarisi dari cax.group:

 class Button extends cax . Group {
  constructor ( option ) {
    super ( )
    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

Gunakan tombolnya:

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

Secara umum, disarankan agar kelompok waris dari kombinasi yang sedikit kompleks, yang kondusif untuk ekspansi dan pengelolaan komponen internal.

Demo Game WeChat

Lisensi

Mit