Forgot Password ??

PHP , ASP , ASP.NET, VB.NET, C#, Java , jQuery , Android , iOS , Windows Phone

	Registered : 109,038

HOME > PHP > PHP Forum > ขอคำแนะนำในการคำนวนราคาจากการใช้ OnClick ตอนนี้กำลังทำโปรเจคจบอยู่ครับ....ไม่อยากจ้างเขา....ผมคิดว่าถ้าพยายามก็น่าจะทำได้

[PHP] ขอคำแนะนำในการคำนวนราคาจากการใช้ OnClick ตอนนี้กำลังทำโปรเจคจบอยู่ครับ....ไม่อยากจ้างเขา....ผมคิดว่าถ้าพยายามก็น่าจะทำได้

เริ่มหัวข้อใหม่

โปรแกรมเมอร์หัดบิน

โพสกระทู้ ( 4 )
บทความ ( 0 )

ปกติเสื้อเปล่า ๆ ราคา 100 บาท แต่พอเวลาเราเลือกรูปภาพหรืออัพโหลดรูปภาพเข้ามาแล้ว ราคาจะเพิ่มขึ้น รูปละ 50 บาท ต้องทำไงครับ....ช่วยแนะแนวทางผมหน่อย !!

Tag : PHP, HTML/CSS, JavaScript, Ajax, jQuery, CakePHP

Date : 2016-09-02 11:13:01

By : mama0154

View : 902

Reply : 4

No. 1

deawx

โพสกระทู้ ( 5,149 )
บทความ ( 26 )

ระบบนี้เขียนเองทั้งหมดใช่ไหมครับ

แล้วโค้ดมันเป็นยังไง js น่ะครับ

Date : 2016-09-02 11:23:37

By : deawx

No. 2

โปรแกรมเมอร์หัดบิน

โพสกระทู้ ( 4 )
บทความ ( 0 )

ตอบความคิดเห็นที่ : 1 เขียนโดย : deawx เมื่อวันที่ 2016-09-02 11:23:37

รายละเอียดของการตอบ ::

ตัวนี้ผมโหลดมาแต่มันไม่ได้คำนวนราคามาให้

Code

var canvas;
var tshirts = new Array(); //prototype: [{style:'x',color:'white',front:'a',back:'b',price:{tshirt:'12.95',frontPrint:'4.99',backPrint:'4.99',total:'22.47'}}]
var a;
var b;
var line1;
var line2;
var line3;
var line4;
    $(document).ready(function() {
        //setup front side canvas 
        canvas = new fabric.Canvas('tcanvas', {
          hoverCursor: 'pointer',
          selection: true,
          selectionBorderColor:'blue'
        });
        canvas.on({
             'object:moving': function(e) {         
                e.target.opacity = 0.5;
              },
              'object:modified': function(e) {          
                e.target.opacity = 1;
              },
             'object:selected':onObjectSelected,
             'selection:cleared':onSelectedCleared
         });
        // piggyback on `canvas.findTarget`, to fire "object:over" and "object:out" events
        canvas.findTarget = (function(originalFn) {
          return function() {
            var target = originalFn.apply(this, arguments);
            if (target) {
              if (this._hoveredTarget !== target) {
                  canvas.fire('object:over', { target: target });
                if (this._hoveredTarget) {
                    canvas.fire('object:out', { target: this._hoveredTarget });
                }
                this._hoveredTarget = target;
              }
            }
            else if (this._hoveredTarget) {
                canvas.fire('object:out', { target: this._hoveredTarget });
              this._hoveredTarget = null;
            }
            return target;
          };
        })(canvas.findTarget);
 
        canvas.on('object:over', function(e) {      
          //e.target.setFill('red');
          //canvas.renderAll();
        });
         
        canvas.on('object:out', function(e) {       
          //e.target.setFill('green');
          //canvas.renderAll();
        });
                      
        document.getElementById('add-text').onclick = function() {
            var text = $("#text-string").val();
            var textSample = new fabric.Text(text, {
              left: fabric.util.getRandomInt(0, 200),
              top: fabric.util.getRandomInt(0, 400),
              fontFamily: 'helvetica',
              angle: 0,
              fill: '#000000',
              scaleX: 0.5,
              scaleY: 0.5,
              fontWeight: '',
              hasRotatingPoint:true
            });         
            canvas.add(textSample); 
            canvas.item(canvas.item.length-1).hasRotatingPoint = true;    
            $("#texteditor").css('display', 'block');
            $("#imageeditor").css('display', 'block');
        };
        $("#text-string").keyup(function(){         
            var activeObject = canvas.getActiveObject();
              if (activeObject && activeObject.type === 'text') {
                  activeObject.text = this.value;
                  canvas.renderAll();
              }
        });
        $(".img-polaroid").click(function(e){
            var el = e.target;
            /*temp code*/
            var offset = 50;
            var left = fabric.util.getRandomInt(0 + offset, 200 - offset);
            var top = fabric.util.getRandomInt(0 + offset, 400 - offset);
            var angle = fabric.util.getRandomInt(-20, 40);
            var width = fabric.util.getRandomInt(30, 50);
            var opacity = (function(min, max){ return Math.random() * (max - min) + min; })(0.5, 1);
             
            fabric.Image.fromURL(el.src, function(image) {
                  image.set({
                    left: left,
                    top: top,
                    angle: 0,
                    padding: 10,
                    cornersize: 10,
                    hasRotatingPoint:true
                  });
                  //image.scale(getRandomNum(0.1, 0.25)).setCoords();
                  canvas.add(image);
                });
        });           
      document.getElementById('remove-selected').onclick = function() {       
            var activeObject = canvas.getActiveObject(),
                activeGroup = canvas.getActiveGroup();
            if (activeObject) {
              canvas.remove(activeObject);
              $("#text-string").val("");
            }
            else if (activeGroup) {
              var objectsInGroup = activeGroup.getObjects();
              canvas.discardActiveGroup();
              objectsInGroup.forEach(function(object) {
                canvas.remove(object);
              });
            }
      };
      document.getElementById('bring-to-front').onclick = function() {        
            var activeObject = canvas.getActiveObject(),
                activeGroup = canvas.getActiveGroup();
            if (activeObject) {
              activeObject.bringToFront();
            }
            else if (activeGroup) {
              var objectsInGroup = activeGroup.getObjects();
              canvas.discardActiveGroup();
              objectsInGroup.forEach(function(object) {
                object.bringToFront();
              });
            }
      };
      document.getElementById('send-to-back').onclick = function() {          
            var activeObject = canvas.getActiveObject(),
                activeGroup = canvas.getActiveGroup();
            if (activeObject) {
              activeObject.sendToBack();
            }
            else if (activeGroup) {
              var objectsInGroup = activeGroup.getObjects();
              canvas.discardActiveGroup();
              objectsInGroup.forEach(function(object) {
                object.sendToBack();
              });
            }
      };          
      $("#text-bold").click(function() {          
          var activeObject = canvas.getActiveObject();
          if (activeObject && activeObject.type === 'text') {
            activeObject.fontWeight = (activeObject.fontWeight == 'bold' ? '' : 'bold');            
            canvas.renderAll();
          }
        });
      $("#text-italic").click(function() {       
          var activeObject = canvas.getActiveObject();
          if (activeObject && activeObject.type === 'text') {
              activeObject.fontStyle = (activeObject.fontStyle == 'italic' ? '' : 'italic');            
            canvas.renderAll();
          }
        });
      $("#text-strike").click(function() {        
          var activeObject = canvas.getActiveObject();
          if (activeObject && activeObject.type === 'text') {
              activeObject.textDecoration = (activeObject.textDecoration == 'line-through' ? '' : 'line-through');
            canvas.renderAll();
          }
        });
      $("#text-underline").click(function() {         
          var activeObject = canvas.getActiveObject();
          if (activeObject && activeObject.type === 'text') {
              activeObject.textDecoration = (activeObject.textDecoration == 'underline' ? '' : 'underline');
            canvas.renderAll();
          }
        });
      $("#text-left").click(function() {          
          var activeObject = canvas.getActiveObject();
          if (activeObject && activeObject.type === 'text') {
              activeObject.textAlign = 'left';
            canvas.renderAll();
          }
        });
      $("#text-center").click(function() {        
          var activeObject = canvas.getActiveObject();
          if (activeObject && activeObject.type === 'text') {
              activeObject.textAlign = 'center';            
            canvas.renderAll();
          }
        });
      $("#text-right").click(function() {         
          var activeObject = canvas.getActiveObject();
          if (activeObject && activeObject.type === 'text') {
              activeObject.textAlign = 'right';         
            canvas.renderAll();
          }
        });   
      $("#font-family").change(function() {
          var activeObject = canvas.getActiveObject();
          if (activeObject && activeObject.type === 'text') {
            activeObject.fontFamily = this.value;
            canvas.renderAll();
          }
        });   
        $('#text-bgcolor').miniColors({
            change: function(hex, rgb) {
              var activeObject = canvas.getActiveObject();
              if (activeObject && activeObject.type === 'text') {
                  activeObject.backgroundColor = this.value;
                canvas.renderAll();
              }
            },
            open: function(hex, rgb) {
                //
            },
            close: function(hex, rgb) {
                //
            }
        });     
        $('#text-fontcolor').miniColors({
            change: function(hex, rgb) {
              var activeObject = canvas.getActiveObject();
              if (activeObject && activeObject.type === 'text') {
                  activeObject.fill = this.value;
                  canvas.renderAll();
              }
            },
            open: function(hex, rgb) {
                //
            },
            close: function(hex, rgb) {
                //
            }
        });
         
        $('#text-strokecolor').miniColors({
            change: function(hex, rgb) {
              var activeObject = canvas.getActiveObject();
              if (activeObject && activeObject.type === 'text') {
                  activeObject.strokeStyle = this.value;
                  canvas.renderAll();
              }
            },
            open: function(hex, rgb) {
                //
            },
            close: function(hex, rgb) {
                //
            }
        });
     
        //canvas.add(new fabric.fabric.Object({hasBorders:true,hasControls:false,hasRotatingPoint:false,selectable:false,type:'rect'}));
       $("#drawingArea").hover(
            function() {                
                 canvas.add(line1);
                 canvas.add(line2);
                 canvas.add(line3);
                 canvas.add(line4); 
                 canvas.renderAll();
            },
            function() {                
                 canvas.remove(line1);
                 canvas.remove(line2);
                 canvas.remove(line3);
                 canvas.remove(line4);
                 canvas.renderAll();
            }
        );
        
       $('.color-preview').click(function(){
           var color = $(this).css("background-color");
           document.getElementById("shirtDiv").style.backgroundColor = color;          
       });
        
        
                                
        
        
        
        
        
       $('#flip').click(
           function() {            
                if ($(this).attr("data-original-title") == "Show Back View") {
                    $(this).attr('data-original-title', 'Show Front View');                                
                    $("#tshirtFacing").attr("src","img/crew_back.png");                 
                    a = JSON.stringify(canvas);
                    canvas.clear();
                    try
                    {
                       var json = JSON.parse(b);
                       canvas.loadFromJSON(b);
                    }
                    catch(e)
                    {}
                     
                } else {
                    $(this).attr('data-original-title', 'Show Back View');                                      
                    $("#tshirtFacing").attr("src","img/crew_front.png");                    
                    b = JSON.stringify(canvas);
                    canvas.clear();
                    try
                    {
                       var json = JSON.parse(a);
                       canvas.loadFromJSON(a);                     
                    }
                    catch(e)
                    {}
                }       
                canvas.renderAll();
                setTimeout(function() {
                    canvas.calcOffset();
                },200);             
        });    
       $(".clearfix button,a").tooltip();
       line1 = new fabric.Line([0,0,200,0], {"stroke":"#000000", "strokeWidth":1,hasBorders:false,hasControls:false,hasRotatingPoint:false,selectable:false});
       line2 = new fabric.Line([199,0,200,399], {"stroke":"#000000", "strokeWidth":1,hasBorders:false,hasControls:false,hasRotatingPoint:false,selectable:false});
       line3 = new fabric.Line([0,0,0,400], {"stroke":"#000000", "strokeWidth":1,hasBorders:false,hasControls:false,hasRotatingPoint:false,selectable:false});
       line4 = new fabric.Line([0,400,200,399], {"stroke":"#000000", "strokeWidth":1,hasBorders:false,hasControls:false,hasRotatingPoint:false,selectable:false});
     });//doc ready
      
      
      
          
      
     function getRandomNum(min, max) {
        return Math.random() * (max - min) + min;
     }
      
     function onObjectSelected(e) {  
        var selectedObject = e.target;
        $("#text-string").val("");
        selectedObject.hasRotatingPoint = true
        if (selectedObject && selectedObject.type === 'text') {
            //display text editor           
            $("#texteditor").css('display', 'block');
            $("#text-string").val(selectedObject.getText());            
            $('#text-fontcolor').miniColors('value',selectedObject.fill);
            $('#text-strokecolor').miniColors('value',selectedObject.strokeStyle);  
            $("#imageeditor").css('display', 'block');
        }
        else if (selectedObject && selectedObject.type === 'image'){
            //display image editor
            $("#texteditor").css('display', 'none');    
            $("#imageeditor").css('display', 'block');
        }
      }
     function onSelectedCleared(e){
         $("#texteditor").css('display', 'none');
         $("#text-string").val("");
         $("#imageeditor").css('display', 'none');
     }
     function setFont(font){
          var activeObject = canvas.getActiveObject();
          if (activeObject && activeObject.type === 'text') {
            activeObject.fontFamily = font;
            canvas.renderAll();
          }
      }
     function removeWhite(){
          var activeObject = canvas.getActiveObject();
          if (activeObject && activeObject.type === 'image') {            
              activeObject.filters[2] =  new fabric.Image.filters.RemoveWhite({hreshold: 100, distance: 10});//0-255, 0-255
              activeObject.applyFilters(canvas.renderAll.bind(canvas));
          }         
     }

Date : 2016-09-02 11:36:36

By : mama0154

No. 3

โปรแกรมเมอร์หัดบิน

โพสกระทู้ ( 4 )
บทความ ( 0 )

มีใครพอมีแนวทางมัยหน๋ออ !! มืดแปดด้าน

Date : 2016-09-03 18:01:42

By : mama0154

No. 4

num

โพสกระทู้ ( 1,463 )
บทความ ( 1 )

ลองเช็คบรรทัดที่มีคำว่า PRICE นะครับ

Code (JavaScript)

var canvas;
var tshirts = new Array(); //prototype: [{style:'x',color:'white',front:'a',back:'b',price:{tshirt:'12.95',frontPrint:'4.99',backPrint:'4.99',total:'22.47'}}]
var a;
var b;
var line1;
var line2;
var line3;
var line4;
var PRICE = 100;
    $(document).ready(function() {
        //setup front side canvas 
        canvas = new fabric.Canvas('tcanvas', {
          hoverCursor: 'pointer',
          selection: true,
          selectionBorderColor:'blue'
        });
        canvas.on({
             'object:moving': function(e) {         
                e.target.opacity = 0.5;
              },
              'object:modified': function(e) {          
                e.target.opacity = 1;
              },
             'object:selected':onObjectSelected,
             'selection:cleared':onSelectedCleared
         });
        // piggyback on `canvas.findTarget`, to fire "object:over" and "object:out" events
        canvas.findTarget = (function(originalFn) {
          return function() {
            var target = originalFn.apply(this, arguments);
            if (target) {
              if (this._hoveredTarget !== target) {
                  canvas.fire('object:over', { target: target });
                if (this._hoveredTarget) {
                    canvas.fire('object:out', { target: this._hoveredTarget });
                }
                this._hoveredTarget = target;
              }
            }
            else if (this._hoveredTarget) {
                canvas.fire('object:out', { target: this._hoveredTarget });
              this._hoveredTarget = null;
            }
            return target;
          };
        })(canvas.findTarget);
 
        canvas.on('object:over', function(e) {      
          //e.target.setFill('red');
          //canvas.renderAll();
        });
         
        canvas.on('object:out', function(e) {       
          //e.target.setFill('green');
          //canvas.renderAll();
        });
                      
        document.getElementById('add-text').onclick = function() {
            var text = $("#text-string").val();
            var textSample = new fabric.Text(text, {
              left: fabric.util.getRandomInt(0, 200),
              top: fabric.util.getRandomInt(0, 400),
              fontFamily: 'helvetica',
              angle: 0,
              fill: '#000000',
              scaleX: 0.5,
              scaleY: 0.5,
              fontWeight: '',
              hasRotatingPoint:true
            });         
            canvas.add(textSample); 
            canvas.item(canvas.item.length-1).hasRotatingPoint = true;    
            $("#texteditor").css('display', 'block');
            $("#imageeditor").css('display', 'block');
        };
        $("#text-string").keyup(function(){         
            var activeObject = canvas.getActiveObject();
              if (activeObject && activeObject.type === 'text') {
                  activeObject.text = this.value;
                  canvas.renderAll();
              }
        });
        $(".img-polaroid").click(function(e){
            var el = e.target;
            /*temp code*/
            var offset = 50;
            var left = fabric.util.getRandomInt(0 + offset, 200 - offset);
            var top = fabric.util.getRandomInt(0 + offset, 400 - offset);
            var angle = fabric.util.getRandomInt(-20, 40);
            var width = fabric.util.getRandomInt(30, 50);
            var opacity = (function(min, max){ return Math.random() * (max - min) + min; })(0.5, 1);
             
            fabric.Image.fromURL(el.src, function(image) {
                  image.set({
                    left: left,
                    top: top,
                    angle: 0,
                    padding: 10,
                    cornersize: 10,
                    hasRotatingPoint:true
                  });
                  //image.scale(getRandomNum(0.1, 0.25)).setCoords();
                  canvas.add(image);
                  window.PRICE += 50;
                  alert(window.PRICE);
                });
        });           
      document.getElementById('remove-selected').onclick = function() {       
            var activeObject = canvas.getActiveObject(),
                activeGroup = canvas.getActiveGroup();
            if (activeObject) {
              if (activeObject.get('type')=='image'){
                window.PRICE -= 50;
                alert(window.PRICE);
              }
              canvas.remove(activeObject);
              $("#text-string").val("");
            }
            else if (activeGroup) {
              var objectsInGroup = activeGroup.getObjects();
              canvas.discardActiveGroup();
              objectsInGroup.forEach(function(object) {
                if (object.get('type')=='image'){
                   window.PRICE -= 50;
                   alert(window.PRICE);
                }
                canvas.remove(object);              
              });
            }
      };
      document.getElementById('bring-to-front').onclick = function() {        
            var activeObject = canvas.getActiveObject(),
                activeGroup = canvas.getActiveGroup();
            if (activeObject) {
              activeObject.bringToFront();
            }
            else if (activeGroup) {
              var objectsInGroup = activeGroup.getObjects();
              canvas.discardActiveGroup();
              objectsInGroup.forEach(function(object) {
                object.bringToFront();
              });
            }
      };
      document.getElementById('send-to-back').onclick = function() {          
            var activeObject = canvas.getActiveObject(),
                activeGroup = canvas.getActiveGroup();
            if (activeObject) {
              activeObject.sendToBack();
            }
            else if (activeGroup) {
              var objectsInGroup = activeGroup.getObjects();
              canvas.discardActiveGroup();
              objectsInGroup.forEach(function(object) {
                object.sendToBack();
              });
            }
      };          
      $("#text-bold").click(function() {          
          var activeObject = canvas.getActiveObject();
          if (activeObject && activeObject.type === 'text') {
            activeObject.fontWeight = (activeObject.fontWeight == 'bold' ? '' : 'bold');            
            canvas.renderAll();
          }
        });
      $("#text-italic").click(function() {       
          var activeObject = canvas.getActiveObject();
          if (activeObject && activeObject.type === 'text') {
              activeObject.fontStyle = (activeObject.fontStyle == 'italic' ? '' : 'italic');            
            canvas.renderAll();
          }
        });
      $("#text-strike").click(function() {        
          var activeObject = canvas.getActiveObject();
          if (activeObject && activeObject.type === 'text') {
              activeObject.textDecoration = (activeObject.textDecoration == 'line-through' ? '' : 'line-through');
            canvas.renderAll();
          }
        });
      $("#text-underline").click(function() {         
          var activeObject = canvas.getActiveObject();
          if (activeObject && activeObject.type === 'text') {
              activeObject.textDecoration = (activeObject.textDecoration == 'underline' ? '' : 'underline');
            canvas.renderAll();
          }
        });
      $("#text-left").click(function() {          
          var activeObject = canvas.getActiveObject();
          if (activeObject && activeObject.type === 'text') {
              activeObject.textAlign = 'left';
            canvas.renderAll();
          }
        });
      $("#text-center").click(function() {        
          var activeObject = canvas.getActiveObject();
          if (activeObject && activeObject.type === 'text') {
              activeObject.textAlign = 'center';            
            canvas.renderAll();
          }
        });
      $("#text-right").click(function() {         
          var activeObject = canvas.getActiveObject();
          if (activeObject && activeObject.type === 'text') {
              activeObject.textAlign = 'right';         
            canvas.renderAll();
          }
        });   
      $("#font-family").change(function() {
          var activeObject = canvas.getActiveObject();
          if (activeObject && activeObject.type === 'text') {
            activeObject.fontFamily = this.value;
            canvas.renderAll();
          }
        });   
        $('#text-bgcolor').miniColors({
            change: function(hex, rgb) {
              var activeObject = canvas.getActiveObject();
              if (activeObject && activeObject.type === 'text') {
                  activeObject.backgroundColor = this.value;
                canvas.renderAll();
              }
            },
            open: function(hex, rgb) {
                //
            },
            close: function(hex, rgb) {
                //
            }
        });     
        $('#text-fontcolor').miniColors({
            change: function(hex, rgb) {
              var activeObject = canvas.getActiveObject();
              if (activeObject && activeObject.type === 'text') {
                  activeObject.fill = this.value;
                  canvas.renderAll();
              }
            },
            open: function(hex, rgb) {
                //
            },
            close: function(hex, rgb) {
                //
            }
        });
         
        $('#text-strokecolor').miniColors({
            change: function(hex, rgb) {
              var activeObject = canvas.getActiveObject();
              if (activeObject && activeObject.type === 'text') {
                  activeObject.strokeStyle = this.value;
                  canvas.renderAll();
              }
            },
            open: function(hex, rgb) {
                //
            },
            close: function(hex, rgb) {
                //
            }
        });
     
        //canvas.add(new fabric.fabric.Object({hasBorders:true,hasControls:false,hasRotatingPoint:false,selectable:false,type:'rect'}));
       $("#drawingArea").hover(
            function() {                
                 canvas.add(line1);
                 canvas.add(line2);
                 canvas.add(line3);
                 canvas.add(line4); 
                 canvas.renderAll();
            },
            function() {                
                 canvas.remove(line1);
                 canvas.remove(line2);
                 canvas.remove(line3);
                 canvas.remove(line4);
                 canvas.renderAll();
            }
        );
        
       $('.color-preview').click(function(){
           var color = $(this).css("background-color");
           document.getElementById("shirtDiv").style.backgroundColor = color;          
       });
        
       $('#flip').click(
           function() {            
                if ($(this).attr("data-original-title") == "Show Back View") {
                    $(this).attr('data-original-title', 'Show Front View');                                
                    $("#tshirtFacing").attr("src","img/crew_back.png");                 
                    a = JSON.stringify(canvas);
                    canvas.clear();
                    try
                    {
                       var json = JSON.parse(b);
                       canvas.loadFromJSON(b);
                    }
                    catch(e)
                    {}
                     
                } else {
                    $(this).attr('data-original-title', 'Show Back View');                                      
                    $("#tshirtFacing").attr("src","img/crew_front.png");                    
                    b = JSON.stringify(canvas);
                    canvas.clear();
                    try
                    {
                       var json = JSON.parse(a);
                       canvas.loadFromJSON(a);                     
                    }
                    catch(e)
                    {}
                }       
                canvas.renderAll();
                setTimeout(function() {
                    canvas.calcOffset();
                },200);             
        });    
       $(".clearfix button,a").tooltip();
       line1 = new fabric.Line([0,0,200,0], {"stroke":"#000000", "strokeWidth":1,hasBorders:false,hasControls:false,hasRotatingPoint:false,selectable:false});
       line2 = new fabric.Line([199,0,200,399], {"stroke":"#000000", "strokeWidth":1,hasBorders:false,hasControls:false,hasRotatingPoint:false,selectable:false});
       line3 = new fabric.Line([0,0,0,400], {"stroke":"#000000", "strokeWidth":1,hasBorders:false,hasControls:false,hasRotatingPoint:false,selectable:false});
       line4 = new fabric.Line([0,400,200,399], {"stroke":"#000000", "strokeWidth":1,hasBorders:false,hasControls:false,hasRotatingPoint:false,selectable:false});
     });//doc ready
      
      
     function getRandomNum(min, max) {
        return Math.random() * (max - min) + min;
     }
      
     function onObjectSelected(e) {  
        var selectedObject = e.target;
        $("#text-string").val("");
        selectedObject.hasRotatingPoint = true
        if (selectedObject && selectedObject.type === 'text') {
            //display text editor           
            $("#texteditor").css('display', 'block');
            $("#text-string").val(selectedObject.getText());            
            $('#text-fontcolor').miniColors('value',selectedObject.fill);
            $('#text-strokecolor').miniColors('value',selectedObject.strokeStyle);  
            $("#imageeditor").css('display', 'block');
        }
        else if (selectedObject && selectedObject.type === 'image'){
            //display image editor
            $("#texteditor").css('display', 'none');    
            $("#imageeditor").css('display', 'block');
        }
      }
     function onSelectedCleared(e){
         $("#texteditor").css('display', 'none');
         $("#text-string").val("");
         $("#imageeditor").css('display', 'none');
     }
     function setFont(font){
          var activeObject = canvas.getActiveObject();
          if (activeObject && activeObject.type === 'text') {
            activeObject.fontFamily = font;
            canvas.renderAll();
          }
      }
     function removeWhite(){
          var activeObject = canvas.getActiveObject();
          if (activeObject && activeObject.type === 'image') {            
              activeObject.filters[2] =  new fabric.Image.filters.RemoveWhite({hreshold: 100, distance: 10});//0-255, 0-255
              activeObject.applyFilters(canvas.renderAll.bind(canvas));
          }         
     }

Date : 2016-09-03 18:51:32

By : num

ค้นหาข้อมูล

แสดงความคิดเห็น

Re : ขอคำแนะนำในการคำนวนราคาจากการใช้ OnClick ตอนนี้กำลังทำโปรเจคจบอยู่ครับ....ไม่อยากจ้างเขา....ผมคิดว่าถ้าพยายามก็น่าจะทำได้

รายละเอียด

เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

อัพโหลดแทรกรูปภาพ

Notice

เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ
อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง

เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง

โดย

อีเมล์

บวกค่าให้ถูก

<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)

Load balance : Server 01

Registered : 109,038

No. 1

No. 2

No. 3

No. 4

ค้นหาข้อมูล

อัพโหลดแทรกรูปภาพ

Notice