cax
1.0.0
Englisch | 简体中文
Canvas 2d Rendering Motor
→ Demo -Quellcode
Holen Sie sich CAX über NPM oder CDN:
npm i caxVerwendung:
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 ( )
}
} ) Für die Gruppierung kann die Gruppe auch die Gruppe verschachteln, und die Eigenschaften des übergeordneten Containers werden über Kindereigenschaften überlagert, wie z. B.:
const group = new cax . Group ( )
const rect = new cax . Rect ( 100 , 100 , {
fillStyle : 'black'
} )
group . add ( rect )
stage . add ( group )
stage . update ( ) Gruppe hat üblicherweise Methoden add und remove , um Elemente hinzuzufügen und zu löschen. Der erste Add wird zuerst gezeichnet, und alle nachfolgenden Adds werden über dem oberen Hinzufügen abgedeckt.
Kind zur Gruppe hinzufügen
groupObj . add ( child ) Das Kind aus der Gruppe entfernen
groupObj . remove ( child ) Entfernen Sie alle Kinder aus der Gruppe
groupObj . empty ( ) Ersetzen Sie das Kind durch einen anderen OBJ
groupObj . replace ( current , prev )Die Bühne ist der größte Top -Container, der von der Gruppe geerbt wurde, und haben also alle Methoden und Requisiten der Gruppe.
Jedes Element kann auf der Bühne nicht gesehen werden. Sie müssen die Aktualisierungsmethode ausführen.
stage . update ( )Jede Elementeigenschaft wird geändert. Bitte führen Sie Stage.update () durch, um die Bühne zu aktualisieren oder in den Timer zu setzen.
cax . tick ( stage . update . bind ( stage ) ) Wenn die Höhe der Leinwand und die Pixel der Leinwand nicht eins zu eins sind, ist die Auslöserposition von Ereignissen ungenau und Sie können die scaleEventpoint-Methode verwenden, um das Ereignis korrekt zu machen.
//The width of the canvas is half the canvas pixel
stage . scaleEventPoint ( 0.5 , 0.5 )Beispiel: https://github.com/dntzhang/cax/blob/master/packages/cax/examples/pie/main.js#l218-l220
Deaktivieren Sie die Erkennung von Ereignissen für Maus oder Berührungsmobile. Der Standardwert im Web ist falsch. Sie können es ändern:
stage . disableMoveDetection = true Stellen Sie das Touchmove- und Mousemove -Erkennungsintervall durch bewegtes ErsatzInterval ein.
//check twice in one second
stage . moveDetectionInterval = 500 const bitmap = new cax . Bitmap ( img )
stage . add ( bitmap )
stage . update ( )Wenn Sie nur URL anstelle der Instanz des Bildobjekts übertragen, müssen Sie dies tun:
const bitmap = new cax . Bitmap ( './wepay.png' , ( ) => {
stage . update ( )
} )
stage . add ( bitmap ) Sie können den Bildausschnitt -Anzeigebereich und andere Transformationsattribute festlegen:
bitmap . rect = [ 0 , 0 , 170 , 140 ]
bitmap . x = 200
bitmap . rotation = 30Die Sequenz -Frame -Animationskomponente kann jede Region eines beliebigen Bildes zu einer Reihe von Animationen kombinieren.
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 ( ) {
}
} ) ; Springen Sie zum aktuellen Animationsnamen und beginnen Sie zu spielen
spriteObj . gotoAndPlay ( animationName ) Springen Sie zum aktuellen Animationsnamen und stoppen Sie
spriteObj . gotoAndStop ( animationName ) Springen Sie zum aktuellen Animationsnamen und beginnen Sie zu spielen, zerstören Sie sich nach der Animation. Oft in Explosionen verwendet
spriteObj . gotoAndPlayOnce ( animationName )Textobjekt
const text = new cax . Text ( 'Hello World' , {
font : '20px Arial' ,
color : '#ff7700' ,
baseline : 'top'
} ) Holen Sie sich eine Textbreite
textObj . getWidth ( )Das Zeichenobjekt wird verwendet, um Grafiken mit Canvas -Anweisungen in der grundlegenden Verknüpfungsweise zu zeichnen.
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 )Wenn Sie in einer Schleife einen Grafikverbindungs -Rendering -Vorgang ausführen, fügen Sie die Methode clear () hinzu, oder der Pfad wird zu Ihrem Browser überlastet:
cax . setInterval ( function ( ) {
graphics
. clear ( )
. beginPath ( )
. arc ( 0 , 0 , 10 , 0 , Math . PI * 2 )
. stroke ( )
} , 16 )Im Gegensatz zur Grafik hat die Form normalerweise eine begrenzte Breite, sodass sie mit Off -Screen -Leinwand gepuffert werden kann. Die folgenden sind Form.
const rect = new cax . Rect ( 200 , 100 , {
fillStyle : 'black'
} ) const circle = new cax . Circle ( 10 ) const ellipse = new cax . Ellipse ( 120 , 20 )Element ist eine Kombination von mehreren Elementen wie Bitmap, Gruppen, Text, Form und anderen gemischten Bildern.
const button = new cax . Button ( {
width : 100 ,
height : 40 ,
text : "Click Me!"
} ) | Name | Beschreiben |
|---|---|
| X | Horizontaler Versatz |
| y | Vertikaler Offset |
| Scalex | Horizontale Skalierung |
| skaliert | Vertikale Skalierung |
| Skala | Horizontaler und vertikaler Skalierung |
| Drehung | Drehung |
| Verseckung | Verseckung |
| schief | schief |
| Originx | Rotationsbasispunkt x |
| Herkunft | Rotationsbasispunkt y |
| Name | Beschreiben |
|---|---|
| Alpha | Die Transparenz des Elements |
Beachten Sie, dass der Vater und der Sohn Alpha eingerichtet haben, um multiplikatives Stapeln durchzuführen.
| Name | Beschreiben |
|---|---|
| Zusammensetzung | Das vom Quellbild zum Zielbild gezogene Überlagerungsmuster |
Beachten Sie, dass wenn Sie keine Definition von Compositeoperation haben, um nachzuschlagen, den Elternbehälter der nächstgelegenen Kompositoperation als eigene Zusammensetzung finden.
| Name | Beschreiben |
|---|---|
| Cursor | Die Form der Maus |
| Name | Beschreiben |
|---|---|
| behoben | Ob behoben werden soll oder nicht, die Standardeinstellung ist falsch und auf wahr eingestellt wird die Transformation der Vorfahren nicht überlagert. |
| Name | Beschreiben |
|---|---|
| Schatten | Schatten |
Verwendung:
obj . shadow = {
color : '#42B035' ,
offsetX : - 5 ,
offsetY : 5 ,
blur : 10
}| Name | Beschreiben |
|---|---|
| Bühne | Holen Sie sich die Wurzelbühne |
Verwendung:
obj . stage Sich selbst zerstören
obj . destroy ( ) | Name | Beschreiben |
|---|---|
| klicken | Klicken Sie auf das Element Zeitauslöser |
| Mousedown | Auslöser, wenn die Maustaste auf das Element gedrückt wird |
| Mousemove | Trigger, wenn sich der Mauszeiger zum Element bewegt |
| Mausup | Trigger, wenn die Maustaste auf dem Element freigegeben wird |
| Mausover | Trigger, wenn sich der Mauszeiger zum Element bewegt |
| Mausout | Trigger, wenn sich der Mauszeiger aus dem Element bewegt |
| klopfen | Verlassen Sie den Finger und lassen Sie sie sofort |
| Touchstart | Der Beginn der Finger -Touch -Aktion |
| Touchmove | Bewegen Sie den Finger nach Berührung |
| Berührung | Ende der Finger -Touch -Aktion |
| ziehen | Ziehen und Drop |
const handler = ( ) => { }
obj . on ( 'click' , handler )
//unbind
obj . off ( 'click' , handler ) CAX hat in der Fähigkeit eingebaut, Bewegungseffekte kontinuierlich zu schreiben.
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 und to parallel sindto wait sind seriellto to ist seriell mit dem nächsten und to und to Wenn Sie eine kreisförmige Bewegung wünschen, können Sie die cycle verwenden:
cax . To . get ( bitmap )
. to ( )
. y ( 340 , 2000 , cax . easing . elasticInOut )
. to
. y ( 0 , 2000 , cax . easing . elasticInOut )
. cycle ( )
. start ( )Es ist wichtig zu beachten, dass Cax im Gegensatz zu Tween.js den Kamelcase verwendet. Zum Beispiel wird Cubic.in Cubicin.
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 )Sie können den gleichen Effekt mit Blow Code erhalten:
const clipPath = new cax . Graphics ( )
clipPath . x = 40
clipPath . y = 40
clipPath . arc ( 0 , 0 , 25 , 0 , Math . PI * 2 )Sie können also feststellen, dass Clip -Grafiken alle Transformationsrequisiten (x, y, scalex, scaley, rotation, scalewy, scwy, originx, originy) unterstützt.
→ Clip -Demo
Benutzerdefinierte Form erbt von 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 ( )
}
}Verwenden Sie die Form:
const sector = new Sector ( 10 , 0 , Math . PI / 6 , {
fillStyle : 'red'
lineWidth : 2
} )
stage . add ( sector )
stage . update ( )Benutzerdefiniertes Element erbt von 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 ButtonVerwenden Sie die Taste:
const button = new cax . Button ( {
width : 100 ,
height : 40 ,
text : "Click Me!"
} )Im Allgemeinen wird vermutet, dass die Erbe -Gruppe aus einer leicht komplexen Kombination, die der Expansion und Behandlung interner Komponenten fördert.
MIT
