cax
1.0.0
ภาษาอังกฤษ | 简体中文
เครื่องมือแสดงผลผ้าใบ 2D
→ซอร์สโค้ดสาธิต
รับ CAX ผ่าน NPM หรือ CDN:
npm i caxการใช้งาน:
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 ( )
}
} ) สำหรับการจัดกลุ่มกลุ่มยังสามารถซ้อนกันได้และคุณสมบัติของคอนเทนเนอร์ของผู้ปกครองจะถูกซ้อนทับกับคุณสมบัติของเด็กเช่น:
const group = new cax . Group ( )
const rect = new cax . Rect ( 100 , 100 , {
fillStyle : 'black'
} )
group . add ( rect )
stage . add ( group )
stage . update ( ) กลุ่มมีการใช้ add และ remove วิธีการเพิ่มและลบองค์ประกอบโดยทั่วไป การเพิ่มครั้งแรกจะถูกดึงก่อนและการเพิ่มที่ตามมาทั้งหมดจะครอบคลุมเหนือการเพิ่มด้านบน
เพิ่มเด็กเข้าเป็นกลุ่ม
groupObj . add ( child ) ลบเด็กออกจากกลุ่ม
groupObj . remove ( child ) ลบเด็กทั้งหมดออกจากกลุ่ม
groupObj . empty ( ) แทนที่เด็กโดย OBJ คนอื่น
groupObj . replace ( current , prev )Stage เป็นภาชนะบรรจุชั้นนำที่ใหญ่ที่สุดที่สืบทอดมาจากกลุ่มดังนั้นจึงมีวิธีการและอุปกรณ์ประกอบฉากทั้งหมดของกลุ่ม
ไม่สามารถมองเห็นองค์ประกอบใด ๆ บนเวทีได้ คุณต้องดำเนินการวิธีการอัปเดต
stage . update ( )คุณสมบัติองค์ประกอบใด ๆ ได้รับการแก้ไข โปรดดำเนินการ stage.update () เพื่ออัปเดตเวทีหรือวางไว้ในตัวจับเวลา
cax . tick ( stage . update . bind ( stage ) ) เมื่อความสูงของผืนผ้าใบและพิกเซลของผืนผ้าใบไม่ใช่แบบหนึ่งต่อหนึ่งตำแหน่งการทริกเกอร์เหตุการณ์ไม่ถูกต้องและคุณสามารถใช้วิธี ScaleEventPoint เพื่อทำให้เหตุการณ์ถูกต้อง
//The width of the canvas is half the canvas pixel
stage . scaleEventPoint ( 0.5 , 0.5 )ตัวอย่าง: https://github.com/dntzhang/cax/blob/master/packages/cax/examples/pie/main.js#l218-l220
ปิดการใช้งานการตรวจจับเหตุการณ์สำหรับเมาส์หรือสัมผัสมือถือ ค่าเริ่มต้นในเว็บเป็นเท็จ คุณสามารถเปลี่ยนได้:
stage . disableMoveDetection = true ตั้งค่าช่วงเวลาการตรวจจับ touchmove และ mousemove โดย MoveTeTectionInterval
//check twice in one second
stage . moveDetectionInterval = 500 const bitmap = new cax . Bitmap ( img )
stage . add ( bitmap )
stage . update ( )หากคุณส่งเฉพาะ URL แทนอินสแตนซ์ของวัตถุภาพคุณต้องทำสิ่งนี้:
const bitmap = new cax . Bitmap ( './wepay.png' , ( ) => {
stage . update ( )
} )
stage . add ( bitmap ) คุณสามารถตั้งค่าพื้นที่แสดงภาพการตัดรูปภาพและแอตทริบิวต์การแปลงอื่น ๆ :
bitmap . rect = [ 0 , 0 , 170 , 140 ]
bitmap . x = 200
bitmap . rotation = 30ส่วนประกอบของเฟรมซีเควนซ์สามารถรวมภูมิภาคใด ๆ ของภาพใด ๆ ไว้ในชุดภาพเคลื่อนไหว
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 ( ) {
}
} ) ; ข้ามไปที่ชื่อแอนิเมชั่นปัจจุบันและเริ่มเล่น
spriteObj . gotoAndPlay ( animationName ) ข้ามไปที่ชื่อแอนิเมชั่นปัจจุบันและหยุด
spriteObj . gotoAndStop ( animationName ) ข้ามไปที่ชื่อแอนิเมชั่นปัจจุบันและเริ่มเล่นจากนั้นทำลายตัวเองหลังจากแอนิเมชั่น มักใช้ในการระเบิด
spriteObj . gotoAndPlayOnce ( animationName )วัตถุข้อความ
const text = new cax . Text ( 'Hello World' , {
font : '20px Arial' ,
color : '#ff7700' ,
baseline : 'top'
} ) รับความกว้างของข้อความ
textObj . getWidth ( )วัตถุวาดภาพใช้ในการวาดกราฟิกด้วยคำแนะนำผืนผ้าใบในวิธีการเชื่อมโยงพื้นฐาน
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 )โดยเฉพาะอย่างยิ่งหากคุณทำการดำเนินการแสดงการเชื่อมต่อกราฟิกในลูปให้แน่ใจว่าได้เพิ่มวิธีการที่ชัดเจน () หรือเส้นทางจะถูกโอเวอร์โหลดไปยังเบราว์เซอร์ของคุณ:
cax . setInterval ( function ( ) {
graphics
. clear ( )
. beginPath ( )
. arc ( 0 , 0 , 10 , 0 , Math . PI * 2 )
. stroke ( )
} , 16 )ซึ่งแตกต่างจากกราฟิกรูปร่างมักจะมีความสูงที่ จำกัด ดังนั้นจึงสามารถบัฟเฟอร์ด้วยผ้าใบปิดหน้าจอ ต่อไปนี้เป็นรูปร่าง
const rect = new cax . Rect ( 200 , 100 , {
fillStyle : 'black'
} ) const circle = new cax . Circle ( 10 ) const ellipse = new cax . Ellipse ( 120 , 20 )องค์ประกอบคือการรวมกันขององค์ประกอบหลายอย่างเช่นบิตแมปกลุ่มข้อความรูปร่างและภาพผสมอื่น ๆ
const button = new cax . Button ( {
width : 100 ,
height : 40 ,
text : "Click Me!"
} ) | ชื่อ | อธิบาย |
|---|---|
| x | ออฟเซ็ตแนวนอน |
| y | ออฟเซ็ตแนวตั้ง |
| เครื่องขยายเสียง | การปรับขนาดแนวนอน |
| มีขนาดใหญ่ | การปรับขนาดแนวตั้ง |
| มาตราส่วน | การปรับขนาดแนวนอนและแนวตั้ง |
| การหมุน | การหมุน |
| หนาม | หนาม |
| เบียดเสียด | เบียดเสียด |
| ต้นกำเนิด | จุดฐานหมุน x |
| ต้นกำเนิด | จุดฐานหมุน y |
| ชื่อ | อธิบาย |
|---|---|
| อัลฟ่า | ความโปร่งใสขององค์ประกอบ |
ขอให้สังเกตว่าพ่อและลูกชายได้จัดตั้งอัลฟ่าให้ทำซ้อนกันหลายครั้ง
| ชื่อ | อธิบาย |
|---|---|
| การรวมกัน | รูปแบบการซ้อนทับที่ดึงมาจากภาพต้นทางไปยังภาพเป้าหมาย |
ขอให้สังเกตว่าหากคุณไม่มีคำจำกัดความของคอมโพสิตโอพีเรเตอร์ให้ค้นหาภาชนะแม่คอมโพสิตของคอมโพสิตที่ใกล้ที่สุดเป็นคอมโพสิตของตัวเอง
| ชื่อ | อธิบาย |
|---|---|
| เคอร์เซอร์ | รูปร่างของเมาส์ |
| ชื่อ | อธิบาย |
|---|---|
| ที่ตายตัว | ไม่ว่าจะแก้ไขหรือไม่ค่าเริ่มต้นเป็นเท็จและตั้งค่าเป็นจริงจะไม่ซ้อนทับการแปลงบรรพบุรุษ |
| ชื่อ | อธิบาย |
|---|---|
| เงา | เงา |
การใช้งาน:
obj . shadow = {
color : '#42B035' ,
offsetX : - 5 ,
offsetY : 5 ,
blur : 10
}| ชื่อ | อธิบาย |
|---|---|
| เวที | รับรูทเวที |
การใช้งาน:
obj . stage ทำลายตนเอง
obj . destroy ( ) | ชื่อ | อธิบาย |
|---|---|
| คลิก | คลิกเวลาทริกเกอร์ในองค์ประกอบ |
| มูซทาวน์ | ทริกเกอร์เมื่อกดปุ่มเมาส์บนองค์ประกอบ |
| Mousemove | ทริกเกอร์เมื่อตัวชี้เมาส์เคลื่อนไปยังองค์ประกอบ |
| หนู | ทริกเกอร์เมื่อปุ่มเมาส์ถูกปล่อยออกมาบนองค์ประกอบ |
| เมาส์โอเวอร์ | ทริกเกอร์เมื่อตัวชี้เมาส์เคลื่อนไปยังองค์ประกอบ |
| หนู | ทริกเกอร์เมื่อตัวชี้เมาส์เคลื่อนออกจากองค์ประกอบ |
| แตะ | ออกจากนิ้วและทิ้งไว้ทันที |
| TouchStart | จุดเริ่มต้นของการกระทำแบบสัมผัสนิ้ว |
| Touchmove | ขยับนิ้วหลังการสัมผัส |
| สัมผัส | จุดสิ้นสุดของการกระทำแบบสัมผัสนิ้ว |
| ลาก | ลากและวาง |
const handler = ( ) => { }
obj . on ( 'click' , handler )
//unbind
obj . off ( 'click' , handler ) CAX มีความสามารถในการเขียนเอฟเฟกต์การเคลื่อนไหวอย่างต่อเนื่อง
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 และ to ขนานกันto wait เป็นอนุกรมto to เป็นอนุกรมกับถัด to และ to หากคุณต้องการการเคลื่อนที่แบบวงกลมคุณสามารถใช้วิธี cycle :
cax . To . get ( bitmap )
. to ( )
. y ( 340 , 2000 , cax . easing . elasticInOut )
. to
. y ( 0 , 2000 , cax . easing . elasticInOut )
. cycle ( )
. start ( )เป็นสิ่งสำคัญที่จะต้องทราบว่าไม่เหมือนกับ tween.js CAX ใช้อูฐ ตัวอย่างเช่น cubic.in กลายเป็นลูกบาศก์
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 )คุณสามารถได้รับเอฟเฟกต์เดียวกันกับรหัสเป่า:
const clipPath = new cax . Graphics ( )
clipPath . x = 40
clipPath . y = 40
clipPath . arc ( 0 , 0 , 25 , 0 , Math . PI * 2 )ดังนั้นคุณจะพบว่ากราฟิกคลิปรองรับอุปกรณ์ประกอบฉากการแปลงทั้งหมด (X, Y, Scalex, Scaley, การหมุน, skewx, เอียง, Originx, Originy)
→คลิปสาธิต
รูปร่างที่กำหนดเองสืบทอดมาจาก 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 ( )
}
}ใช้รูปร่าง:
const sector = new Sector ( 10 , 0 , Math . PI / 6 , {
fillStyle : 'red'
lineWidth : 2
} )
stage . add ( sector )
stage . update ( )องค์ประกอบที่กำหนดเองสืบทอดมาจาก 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ใช้ปุ่ม:
const button = new cax . Button ( {
width : 100 ,
height : 40 ,
text : "Click Me!"
} )โดยทั่วไปมีข้อเสนอแนะว่าการสืบทอดกลุ่มจากการรวมกันที่ซับซ้อนเล็กน้อยซึ่งเอื้อต่อการขยายตัวและการจัดการส่วนประกอบภายใน
มิกซ์
