cax
1.0.0
Anglais | 简体中文
Moteur de rendu 2d toile
→ Code source de démonstration
Obtenez CAX via NPM ou CDN:
npm i caxUsage:
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 ( )
}
} ) Pour le regroupement, le groupe peut également imbriquer le groupe, et les propriétés du conteneur parent seront superposées aux propriétés enfants, telles que:
const group = new cax . Group ( )
const rect = new cax . Rect ( 100 , 100 , {
fillStyle : 'black'
} )
group . add ( rect )
stage . add ( group )
stage . update ( ) Le groupe a couramment utilisé des méthodes add et remove pour ajouter et supprimer des éléments. Le premier ADD sera dessiné en premier, et tous les ADD ultérieurs seront couverts au-dessus de l'addition supérieure.
Ajouter un enfant au groupe
groupObj . add ( child ) Retirer l'enfant du groupe
groupObj . remove ( child ) Retirez tous les enfants du groupe
groupObj . empty ( ) remplacer l'enfant par un autre obj
groupObj . replace ( current , prev )L'étape est le plus grand conteneur supérieur hérité du groupe, il y a donc toutes les méthodes et accessoires de groupe.
Tout élément ne peut pas être vu sur scène. Vous devez exécuter la méthode de mise à jour.
stage . update ( )Toute propriété d'élément est modifiée. Veuillez effectuer Stage.Update () pour mettre à jour la scène ou le mettre dans la minuterie.
cax . tick ( stage . update . bind ( stage ) ) Lorsque la hauteur de la toile et les pixels de la toile ne sont pas un à un, la position de déclenchement de l'événement est inexacte et vous pouvez utiliser la méthode ScaleeventPoint pour rendre l'événement correct.
//The width of the canvas is half the canvas pixel
stage . scaleEventPoint ( 0.5 , 0.5 )Exemple: https://github.com/dntzhang/cax/blob/master/packages/cax/examples/pie/main.js#l218-l220
Désactiver la détection des événements pour la souris ou Touch Mobile. La valeur par défaut sur le Web est fausse. Vous pouvez le changer:
stage . disableMoveDetection = true Réglez l'intervalle de détection TouchMove et Mousemove par Moquetection Interval.
//check twice in one second
stage . moveDetectionInterval = 500 const bitmap = new cax . Bitmap ( img )
stage . add ( bitmap )
stage . update ( )Si vous transmettez uniquement l'URL au lieu de l'instance de l'objet d'image, vous devez le faire:
const bitmap = new cax . Bitmap ( './wepay.png' , ( ) => {
stage . update ( )
} )
stage . add ( bitmap ) Vous pouvez définir la zone d'affichage de coupure d'image et d'autres attributs de transformation:
bitmap . rect = [ 0 , 0 , 170 , 140 ]
bitmap . x = 200
bitmap . rotation = 30Le composant d'animation de trame de séquence peut combiner n'importe quelle région de n'importe quelle image dans une série d'animations.
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 ( ) {
}
} ) ; Sautez à l'animation actuelle et commencez à jouer
spriteObj . gotoAndPlay ( animationName ) Sautez à l'animation actuelle et arrêtez
spriteObj . gotoAndStop ( animationName ) Sautez à l'animation actuelle et commencez à jouer, puis détruisez-vous après l'animation. Souvent utilisé dans les explosions
spriteObj . gotoAndPlayOnce ( animationName )Objet texte
const text = new cax . Text ( 'Hello World' , {
font : '20px Arial' ,
color : '#ff7700' ,
baseline : 'top'
} ) Obtenir la largeur du texte
textObj . getWidth ( )L'objet de dessin est utilisé pour dessiner des graphiques avec des instructions sur toile de la manière de base de la liaison.
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 )En particulier, si vous effectuez une opération de rendu de connexion graphique dans une boucle, assurez-vous d'ajouter la méthode Clear (), ou si le chemin sera surchargé à votre navigateur:
cax . setInterval ( function ( ) {
graphics
. clear ( )
. beginPath ( )
. arc ( 0 , 0 , 10 , 0 , Math . PI * 2 )
. stroke ( )
} , 16 )Contrairement aux graphiques, la forme a généralement une hauteur de largeur limitée, il peut donc être tamponné avec une toile d'écran hors écran. Voici la forme.
const rect = new cax . Rect ( 200 , 100 , {
fillStyle : 'black'
} ) const circle = new cax . Circle ( 10 ) const ellipse = new cax . Ellipse ( 120 , 20 )L'élément est une combinaison de plusieurs éléments, tels que le bitmap, le groupe, le texte, la forme et d'autres images mixtes.
const button = new cax . Button ( {
width : 100 ,
height : 40 ,
text : "Click Me!"
} ) | nom | Décrire |
|---|---|
| x | Décalage horizontal |
| y | Décalage vertical |
| scalex | Mise à l'échelle horizontale |
| d'évolution | Échelle verticale |
| échelle | Échelle horizontale et verticale |
| rotation | rotation |
| se pencher | se pencher |
| biologique | biologique |
| OriginX | Point de base de rotation x |
| originaire | Point de base de rotation y |
| Nom | Décrire |
|---|---|
| alpha | La transparence de l'élément |
Notez que le père et le fils ont mis en place Alpha pour faire un empilement multiplicatif.
| Nom | Décrire |
|---|---|
| CompositeOperation | Le motif de superposition tiré de l'image source à l'image cible |
Notez que si vous n'avez pas de définition de CompositeOperation pour rechercher, trouvez le conteneur parent de Composite Operation le plus proche comme propre composite Operation.
| Nom | Décrire |
|---|---|
| curseur | La forme de la souris |
| Nom | Décrire |
|---|---|
| fixé | Que ce soit pour corriger ou non, la valeur par défaut est fausse et définie sur True ne superposera pas la transformation des ancêtres. |
| Nom | Décrire |
|---|---|
| ombre | ombre |
Usage:
obj . shadow = {
color : '#42B035' ,
offsetX : - 5 ,
offsetY : 5 ,
blur : 10
}| Nom | Décrire |
|---|---|
| scène | Obtenez le stade racine |
Usage:
obj . stage Se détruire
obj . destroy ( ) | Nom | Décrire |
|---|---|
| faire un clic | Cliquez sur Triginger Heure sur l'élément |
| soupçon | Déclenche lorsque le bouton de la souris est appuyé sur l'élément |
| mousemove | Déclencher lorsque le pointeur de la souris se déplace vers l'élément |
| souris | Déclencher lorsque le bouton de la souris est libéré sur l'élément |
| souris | Déclencher lorsque le pointeur de la souris se déplace vers l'élément |
| souris | Déclencher lorsque le pointeur de la souris sort de l'élément |
| robinet | Laissez le doigt et partez immédiatement |
| toucher | Le début de l'action du doigt tactile |
| tactile | Déplacer le doigt après le toucher |
| toucher | Action de fin de doigt |
| traîner | Faire glisser et laisser tomber |
const handler = ( ) => { }
obj . on ( 'click' , handler )
//unbind
obj . off ( 'click' , handler ) CAX s'est intégré à la capacité d'écrire des effets de mouvement de manière continue.
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 et to être parallèlesto wait sont en sérieto to est en série avec le to et to Si vous voulez un mouvement circulaire, vous pouvez utiliser la méthode cycle :
cax . To . get ( bitmap )
. to ( )
. y ( 340 , 2000 , cax . easing . elasticInOut )
. to
. y ( 0 , 2000 , cax . easing . elasticInOut )
. cycle ( )
. start ( )Il est important de noter que, contrairement à Tween.js, Cax utilise le camelcase. Par exemple, cubic.in devient cubicine.
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 )Vous pouvez obtenir le même effet avec le code fulgurant:
const clipPath = new cax . Graphics ( )
clipPath . x = 40
clipPath . y = 40
clipPath . arc ( 0 , 0 , 25 , 0 , Math . PI * 2 )Vous pouvez donc constater que CLIP Graphics prend en charge tous les accessoires de transformation (x, y, scalex, scaley, rotation, skewx, crêpe, originx, à l'origine).
→ Clip Demo
La forme personnalisée hérite de 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 ( )
}
}Utilisez la forme:
const sector = new Sector ( 10 , 0 , Math . PI / 6 , {
fillStyle : 'red'
lineWidth : 2
} )
stage . add ( sector )
stage . update ( )L'élément personnalisé hérite de 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 ButtonUtilisez le bouton:
const button = new cax . Button ( {
width : 100 ,
height : 40 ,
text : "Click Me!"
} )En général, il est suggéré de hériter du groupe d'une combinaison légèrement complexe, ce qui est propice à l'expansion et à la gestion des composants internes.
Mit
