14 Jul

การออกแบบทำเสื้อยืดตัวอย่าง(ออนไลน์) อย่างง่ายๆ ด้วย fabric js

customize

ในการทำ Custom T-Shirts หรือการออกแบบลายเสื้อยืดออนไลน์ โดยใช้ fabrice js เป็น javascript canvas library ทำให้สามารถควบคุณ canvas ได้ง่ายมากกว่าแต่ก่อนมาก ทำให้ไม่ยากเหมือนแต่ก่อน มี sourcecode ให้ไปศึกษาครับ

เรามาเริ่มจากตัวอย่างที่เสร็จแล้วกันครับ

1 เริ่มจากการ Include file  fabric.js และ jquery มาเพื่อใช้ใน project

<script src="js/jquery.min.js" type="text/javascript"></script>  
<script src="js/fabric.js" type="text/javascript"></script> 

หลักจากนั้นก็ เริ่ม code ในส่วนแรก สรา้ง instance ของ fabric ขึ้นมาจาก canvas id mainscreen

$( document ).ready(function() {
   
        // สร้าง instance ของ fabric ขึ้นมา ชื่อว่า screen ซึ่งจะต้องใช้ในการวาดหน้าจอใหม่ทุกครั้ง
          var screen = new fabric.Canvas('mainscreen');
              screen.setHeight(360);
              screen.setWidth(600);
      
             /*  code event อื่นที่จะอธิบายในข้อสอง */

});

2 ในส่วนของการทำงานหลักๆ ของแต่ละ event

  • การ load ภาพ background ทำการ load ภาพ shirt.png  ( แนะนำว่าเป็น png ครับ) และ config ต่่างๆ เช่น ไม่ให้สามารถ selectable , ขนาด ตำแหน่งของรูป
    fabric.Image.fromURL('image/shirt.png', function(oImg) {
             
               oImg.width = 298;
               oImg.height = 360;
               oImg.set('selectable', false);
               screen.add(oImg);
               screen.centerObject(oImg);
               
                    bg = screen.item(0);
                    
                    bg.filters.length = 0;
                    bg.filters.push(new fabric.Image.filters.Tint({
                    color: 'white',
                    opacity: 0.6
                    }));
                    bg.applyFilters(screen.renderAll.bind(screen));
               
             
               
           });

     

  • ดัก event การเลือกสีเสื้อ   เป็นการจับ event เมื่อมีการ click ปุ่ม span ใน class bgcolor ดูตาม comment code ครับ
     $( ".bgcolor span" ).click(function() {
                 
                  
                    var color = $(this).attr('class');  // ดึงชื่อ class ของ span ที่เลือก
                    
                    bg = screen.item(0); // เลือก object ใน screen(fabric instance) มาไว้ในตัวแปล bg
                    // set Filters เพื่อเปลี่ยนสีรูป                 
                    bg.filters.length = 0;  
                    bg.filters.push(new fabric.Image.filters.Tint({
                    color: color,
                    opacity: .5
                    }));
                    bg.applyFilters(screen.renderAll.bind(screen));
               });
  • Event ส่วนของการเพิ่ม ตัวอักษร และ เลือกสี ดูตาม comment ครับ
    $( ".addtxt" ).click(function() {
                          var txt = $(".txt").val();   // รับค่าจาก input class .txt
                          var obtext = new fabric.Text(txt, { fontSize: 20 });    // สร้าง text instance กำหนดขนาด และตัวใส่ text
                          // เซ็ตตำแหน่งและเพิ่ม text instance เข้าไปใน screen    
                          screen.centerObject(obtext);
                          screen.add(obtext);
                          screen.renderAll();
                          
                          
                          $(".txt").val("");    
              
              });
  • Event การ upload รูปภาพเข้าไปใน screen ดักจำถ้า user click upload รูปที่ input id imagebroswer
    $( "#imagebroswer" ).change(function() {
    
                      var e = $(this);
                      var reader = new FileReader();
                      reader.onload = function (event){
                                  var imgObj = new Image();
                                  imgObj.src = event.target.result;
                                  imgObj.onload = function () { 
                                  var image = new fabric.Image(imgObj);
                                      image.set({
                                           angle: 0,
                                          
                                     });
                                  screen.centerObject(image);
                                  screen.add(image);
                                  screen.renderAll();
                                    }
                              }
                
                
                  reader.readAsDataURL(e[0].files[0]);
    
                });
  • Event Delete คือการจัดว่าถ้าลูกค้า กดปุ่ม DELETE แล้วจะทำการลบ Object ใน screen ทิ้ง
     $('body').keyup(function(e){
                if(e.keyCode == 46) {
                var activeObject = screen.getActiveObject();  // ดึง Object ที่ active (ที่ user click)
                
                screen.remove(activeObject);  // remove ออกจาก screen
              }
             });
    

จริงๆแล้วส่วนตัวคิดว่า fabric js นั้นสามารถทำได้อีกมากเรียกได้ว่า สามาถทำ ui แบบ photoshop online ได้เลยทีเดียว

หวังว่าบทความนี้จะเป็นไอเดียให้เพื่อนๆคนทำเว็บไปปรับแต่งใช้ในงานต่อไปครับ

SOURCE CODE

Leave a Reply

Your email address will not be published. Required fields are marked *