mini color picker

เครื่องมือเลือกสีขนาดเล็ก

ส่วนประกอบตัวเลือกสีแอปเพล็ต (ตัวเลือกสี) จะเลือกสีผ่านจานสีและใช้สำหรับฉากที่ผู้ใช้กำหนด

ลักษณะ:

การวิเคราะห์โซลูชันที่มีอยู่

• ผู้เลือกสีจำเป็นต้องใส่ใจกับการวางตำแหน่งส่วนประกอบ การทำงานไม่ราบรื่น และการทำงานไม่ราบรื่น และการกำหนดค่ามีความซับซ้อน การวางตำแหน่งจะขยายหน้าเดิมออกไป ส่งผลให้ได้รับประสบการณ์ที่ไม่ดี ระยะการเลื่อนจะแตกต่างกันไปตามพิกเซล (คงที่) และต้องพิจารณาความละเอียดของอุปกรณ์ ซึ่งไม่เอื้อต่อมัลติเอนด์
• PapaerPen ใช้ส่วนประกอบตัวเลื่อนดั้งเดิมเพื่อให้ทราบถึงการเลือกการเลื่อน ซึ่งไม่จำกัดเพียงความละเอียดของอุปกรณ์ อย่างไรก็ตาม ต้องใช้การดำเนินการสามอย่าง และการเลือกสีภายในนั้นยุ่งยากมาก ซึ่งไม่ได้ส่งผลกระทบต่อค่าสีเนื่องจากองค์ประกอบสามอย่าง (HSV/HSB)

สารละลาย

• ใช้แถบเลื่อนอย่างเป็นทางการเพื่อเลือกเฉดสี และใช้มุมมองแบบเคลื่อนย้ายได้เพื่อเลือกความอิ่มตัวของสีและความสว่าง เนื่องจากเป็นองค์ประกอบพื้นฐานอย่างเป็นทางการ การทำงานจึงราบรื่น
• ในการตั้งค่าพื้นที่เลื่อน หลังจากได้รับโหนดจริงแล้ว สัดส่วนจะใช้เพื่อส่งผลต่อการเปลี่ยนแปลงค่าสี โดยไม่คำนึงถึงการแปลง rpx
• ในแง่ของกระบวนการทำงานนั้น จำกัด อยู่ที่พื้นที่ปฏิบัติการของโทรศัพท์มือถือและไม่สามารถใช้ Popover ได้ ใช้ด้านล่างเพื่อดึงหน้าต่างป๊อปอัปขึ้นมาซึ่งจะไม่ส่งผลกระทบต่อหน้าต้นฉบับและเน้นประเด็นสำคัญ
• ในการแสดงตัวอย่างการดำเนินการ เนื่องจากหน้ากากหน้าต่างป๊อปอัปไม่พร้อมใช้งานสำหรับการแสดงตัวอย่างแบบเรียลไทม์อย่างหลีกเลี่ยงไม่ได้ สีของแถบเลื่อนเฉดสีจึงถูกนำมาใช้เพื่อแสดงตัวอย่าง ในขณะเดียวกัน ยังพิจารณาถึงปัญหาด้านความปลอดภัยของ iphone-x อีกด้วย

ผลการใช้งาน

ภาพหน้าจอ

ตัวอย่าง

ดูตัวอย่างเอฟเฟกต์ในเครื่องมือสำหรับนักพัฒนา => รหัสข้อมูลโค้ด: YOF4QUmO7NmW

ติดตั้งและใช้งาน

1. รับส่วนประกอบ

คอมไพล์

อาจไม่เสถียร แต่มีการอัปเดตฟีเจอร์ล่าสุด

git clone https://github.com/MakerGYT/mini-color-picker.git

คัดลอกโฟลเดอร์ส่วนประกอบ/ตัวเลือกสีในโปรเจ็กต์ไปยังเส้นทางส่วนประกอบ

เวลา 22.00 น

ทำให้เสถียร

npm install mini-color-picker --save

หากต้องการใช้แพ็คเกจ npm โปรดดูเอกสารอย่างเป็นทางการของแอปเพล็ต WeChat

2. แนะนำส่วนประกอบ

เพิ่มไฟล์ json ที่สอดคล้องกับเพจโดยใช้คอมโพเนนต์นี้:

{
  "usingComponents" : {
    "color-picker" : " /components/color-picker/color-picker " 
  }
}

หากใช้ npm ให้คลิกแถบเมนูในเครื่องมือสำหรับนักพัฒนา: เครื่องมือ -> สร้าง npm; เลือกตัวเลือก "ใช้โมดูล npm" (การสาธิตเป็นผลลัพธ์หลังจากการสร้าง)

{
  "usingComponents" : {
    "color-picker" : " mini-color-picker/color-picker " 
  }
}

3. ใช้ส่วนประกอบ

อ้างอิง/หน้า

 <!-- index.wxml -->
< view style =" background:{{rgb}};width:100px;height:24px; " bindtap =" toPick " > </ view >
< color-picker bindchangeColor =" pickColor " initColor =" {{rgb}} " show =" {{pick}} " /> 

 Page ( {
  data : {
    rgb : 'rgb(0,154,97)' , //初始值
    pick : false
  } ,
  // 显示取色器
  toPick : function ( ) {
    this . setData ( {
      pick : true
    } )
  } ,
  //取色结果回调
  pickColor ( e ) {
    let rgb = e . detail . color ;
  } ,
} ) 

รายการทรัพย์สิน

คุณสมบัติ	พิมพ์	ค่าเริ่มต้น	ที่จำเป็น	แสดงให้เห็น
แสดง	บูลีน	เท็จ	ใช่	ไม่ว่าจะแสดง
initColor	สตริง	RGB(255,0,0)	ใช่	สีเริ่มต้น การแสดง RGB
หน้ากาก	บูลีน	จริง	เลขที่	จะแสดงมาสก์พื้นหลังหรือไม่
หน้ากากปิดได้	บูลีน	จริง	เลขที่	สามารถปิดมาสก์พื้นหลังได้โดยคลิกที่มันได้หรือไม่
การผูกเปลี่ยนสี	ตัวจัดการเหตุการณ์		เลขที่	โทรกลับหลังจากเลือกสี event.detail = {color}
ผูกปิด	ตัวจัดการเหตุการณ์		เลขที่	เหตุการณ์เกิดขึ้นหลังจากคลิกมาสก์พื้นหลังเพื่อปิดตัวเลือกสี

พัฒนา

สังเกต :

1. ขณะนี้ไม่มีการผูกแบบสองทาง นั่นคือค่าสีจะถูกเลือกโดยผู้ใช้หลังจากได้รับค่าเริ่มต้น และไม่ควรเปลี่ยนโดยอินพุตภายนอก (จากนั้นความหมายของการเลือกสีจะหายไป)
2. คุณสามารถดูตัวอย่างค่าสีของแถบเลื่อนแบบเรียลไทม์ระหว่างกระบวนการสัมผัส และส่งค่าสีไปยังหน้าหลังจากหยุดการสัมผัส เพื่อหลีกเลี่ยงการบล็อกที่เกิดจาก setData บ่อยครั้ง
3. รูปแบบข้อมูลที่ใช้สำหรับการสื่อสารภายนอกกับส่วนประกอบคือ rgb เพื่อหลีกเลี่ยงการแนะนำรูปแบบข้อมูลหลายรูปแบบที่อาจนำไปสู่การซ้ำซ้อนของโค้ดในสถานการณ์จริง นักพัฒนาสามารถแปลงตามความต้องการและตอบกลับเนื้อหาที่เกี่ยวข้องต่อไปนี้ในบัญชีสาธารณะ "MakerGYT " เพื่อรับรหัสฟังก์ชันอ้างอิง:

• RGB2Hex
• RGB2hsv
• RGB2CMYK
• hex2rgb
• hsv2rgb

กรณี

ใบอนุญาต

MIT © MakerGYT