Register Register Member Login Member Login Member Login 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 ตอนนี้กำลังทำโปรเจคจบอยู่ครับ....ไม่อยากจ้างเขา....ผมคิดว่าถ้าพยายามก็น่าจะทำได้

 
Topic : 124455



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



สถานะออฟไลน์
Facebook


คำนวนราคา

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



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

Move To Hilight (Stock) 
Send To Friend.Bookmark.
Date : 2016-09-02 11:13:01 By : mama0154 View : 902 Reply : 4
 

 

No. 1



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

สมาชิกที่ใส่เสื้อไทยครีเอท Hall of Fame 2012

สถานะออฟไลน์


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

แล้วโค้ดมันเป็นยังไง js น่ะครับ
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-09-02 11:23:37 By : deawx
 

 

No. 2



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



สถานะออฟไลน์
Facebook

ตอบความคิดเห็นที่ : 1 เขียนโดย : deawx เมื่อวันที่ 2016-09-02 11:23:37
รายละเอียดของการตอบ ::
ตัวนี้ผมโหลดมาแต่มันไม่ได้คำนวนราคามาให้

Code
001.var canvas;
002.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'}}]
003.var a;
004.var b;
005.var line1;
006.var line2;
007.var line3;
008.var line4;
009.    $(document).ready(function() {
010.        //setup front side canvas
011.        canvas = new fabric.Canvas('tcanvas', {
012.          hoverCursor: 'pointer',
013.          selection: true,
014.          selectionBorderColor:'blue'
015.        });
016.        canvas.on({
017.             'object:moving': function(e) {        
018.                e.target.opacity = 0.5;
019.              },
020.              'object:modified': function(e) {         
021.                e.target.opacity = 1;
022.              },
023.             'object:selected':onObjectSelected,
024.             'selection:cleared':onSelectedCleared
025.         });
026.        // piggyback on `canvas.findTarget`, to fire "object:over" and "object:out" events
027.        canvas.findTarget = (function(originalFn) {
028.          return function() {
029.            var target = originalFn.apply(this, arguments);
030.            if (target) {
031.              if (this._hoveredTarget !== target) {
032.                  canvas.fire('object:over', { target: target });
033.                if (this._hoveredTarget) {
034.                    canvas.fire('object:out', { target: this._hoveredTarget });
035.                }
036.                this._hoveredTarget = target;
037.              }
038.            }
039.            else if (this._hoveredTarget) {
040.                canvas.fire('object:out', { target: this._hoveredTarget });
041.              this._hoveredTarget = null;
042.            }
043.            return target;
044.          };
045.        })(canvas.findTarget);
046. 
047.        canvas.on('object:over', function(e) {     
048.          //e.target.setFill('red');
049.          //canvas.renderAll();
050.        });
051.         
052.        canvas.on('object:out', function(e) {      
053.          //e.target.setFill('green');
054.          //canvas.renderAll();
055.        });
056.                      
057.        document.getElementById('add-text').onclick = function() {
058.            var text = $("#text-string").val();
059.            var textSample = new fabric.Text(text, {
060.              left: fabric.util.getRandomInt(0, 200),
061.              top: fabric.util.getRandomInt(0, 400),
062.              fontFamily: 'helvetica',
063.              angle: 0,
064.              fill: '#000000',
065.              scaleX: 0.5,
066.              scaleY: 0.5,
067.              fontWeight: '',
068.              hasRotatingPoint:true
069.            });        
070.            canvas.add(textSample);
071.            canvas.item(canvas.item.length-1).hasRotatingPoint = true;   
072.            $("#texteditor").css('display', 'block');
073.            $("#imageeditor").css('display', 'block');
074.        };
075.        $("#text-string").keyup(function(){        
076.            var activeObject = canvas.getActiveObject();
077.              if (activeObject && activeObject.type === 'text') {
078.                  activeObject.text = this.value;
079.                  canvas.renderAll();
080.              }
081.        });
082.        $(".img-polaroid").click(function(e){
083.            var el = e.target;
084.            /*temp code*/
085.            var offset = 50;
086.            var left = fabric.util.getRandomInt(0 + offset, 200 - offset);
087.            var top = fabric.util.getRandomInt(0 + offset, 400 - offset);
088.            var angle = fabric.util.getRandomInt(-20, 40);
089.            var width = fabric.util.getRandomInt(30, 50);
090.            var opacity = (function(min, max){ return Math.random() * (max - min) + min; })(0.5, 1);
091.             
092.            fabric.Image.fromURL(el.src, function(image) {
093.                  image.set({
094.                    left: left,
095.                    top: top,
096.                    angle: 0,
097.                    padding: 10,
098.                    cornersize: 10,
099.                    hasRotatingPoint:true
100.                  });
101.                  //image.scale(getRandomNum(0.1, 0.25)).setCoords();
102.                  canvas.add(image);
103.                });
104.        });          
105.      document.getElementById('remove-selected').onclick = function() {      
106.            var activeObject = canvas.getActiveObject(),
107.                activeGroup = canvas.getActiveGroup();
108.            if (activeObject) {
109.              canvas.remove(activeObject);
110.              $("#text-string").val("");
111.            }
112.            else if (activeGroup) {
113.              var objectsInGroup = activeGroup.getObjects();
114.              canvas.discardActiveGroup();
115.              objectsInGroup.forEach(function(object) {
116.                canvas.remove(object);
117.              });
118.            }
119.      };
120.      document.getElementById('bring-to-front').onclick = function() {       
121.            var activeObject = canvas.getActiveObject(),
122.                activeGroup = canvas.getActiveGroup();
123.            if (activeObject) {
124.              activeObject.bringToFront();
125.            }
126.            else if (activeGroup) {
127.              var objectsInGroup = activeGroup.getObjects();
128.              canvas.discardActiveGroup();
129.              objectsInGroup.forEach(function(object) {
130.                object.bringToFront();
131.              });
132.            }
133.      };
134.      document.getElementById('send-to-back').onclick = function() {         
135.            var activeObject = canvas.getActiveObject(),
136.                activeGroup = canvas.getActiveGroup();
137.            if (activeObject) {
138.              activeObject.sendToBack();
139.            }
140.            else if (activeGroup) {
141.              var objectsInGroup = activeGroup.getObjects();
142.              canvas.discardActiveGroup();
143.              objectsInGroup.forEach(function(object) {
144.                object.sendToBack();
145.              });
146.            }
147.      };         
148.      $("#text-bold").click(function() {         
149.          var activeObject = canvas.getActiveObject();
150.          if (activeObject && activeObject.type === 'text') {
151.            activeObject.fontWeight = (activeObject.fontWeight == 'bold' ? '' : 'bold');           
152.            canvas.renderAll();
153.          }
154.        });
155.      $("#text-italic").click(function() {      
156.          var activeObject = canvas.getActiveObject();
157.          if (activeObject && activeObject.type === 'text') {
158.              activeObject.fontStyle = (activeObject.fontStyle == 'italic' ? '' : 'italic');           
159.            canvas.renderAll();
160.          }
161.        });
162.      $("#text-strike").click(function() {       
163.          var activeObject = canvas.getActiveObject();
164.          if (activeObject && activeObject.type === 'text') {
165.              activeObject.textDecoration = (activeObject.textDecoration == 'line-through' ? '' : 'line-through');
166.            canvas.renderAll();
167.          }
168.        });
169.      $("#text-underline").click(function() {        
170.          var activeObject = canvas.getActiveObject();
171.          if (activeObject && activeObject.type === 'text') {
172.              activeObject.textDecoration = (activeObject.textDecoration == 'underline' ? '' : 'underline');
173.            canvas.renderAll();
174.          }
175.        });
176.      $("#text-left").click(function() {         
177.          var activeObject = canvas.getActiveObject();
178.          if (activeObject && activeObject.type === 'text') {
179.              activeObject.textAlign = 'left';
180.            canvas.renderAll();
181.          }
182.        });
183.      $("#text-center").click(function() {       
184.          var activeObject = canvas.getActiveObject();
185.          if (activeObject && activeObject.type === 'text') {
186.              activeObject.textAlign = 'center';           
187.            canvas.renderAll();
188.          }
189.        });
190.      $("#text-right").click(function() {        
191.          var activeObject = canvas.getActiveObject();
192.          if (activeObject && activeObject.type === 'text') {
193.              activeObject.textAlign = 'right';        
194.            canvas.renderAll();
195.          }
196.        });  
197.      $("#font-family").change(function() {
198.          var activeObject = canvas.getActiveObject();
199.          if (activeObject && activeObject.type === 'text') {
200.            activeObject.fontFamily = this.value;
201.            canvas.renderAll();
202.          }
203.        });  
204.        $('#text-bgcolor').miniColors({
205.            change: function(hex, rgb) {
206.              var activeObject = canvas.getActiveObject();
207.              if (activeObject && activeObject.type === 'text') {
208.                  activeObject.backgroundColor = this.value;
209.                canvas.renderAll();
210.              }
211.            },
212.            open: function(hex, rgb) {
213.                //
214.            },
215.            close: function(hex, rgb) {
216.                //
217.            }
218.        });    
219.        $('#text-fontcolor').miniColors({
220.            change: function(hex, rgb) {
221.              var activeObject = canvas.getActiveObject();
222.              if (activeObject && activeObject.type === 'text') {
223.                  activeObject.fill = this.value;
224.                  canvas.renderAll();
225.              }
226.            },
227.            open: function(hex, rgb) {
228.                //
229.            },
230.            close: function(hex, rgb) {
231.                //
232.            }
233.        });
234.         
235.        $('#text-strokecolor').miniColors({
236.            change: function(hex, rgb) {
237.              var activeObject = canvas.getActiveObject();
238.              if (activeObject && activeObject.type === 'text') {
239.                  activeObject.strokeStyle = this.value;
240.                  canvas.renderAll();
241.              }
242.            },
243.            open: function(hex, rgb) {
244.                //
245.            },
246.            close: function(hex, rgb) {
247.                //
248.            }
249.        });
250.     
251.        //canvas.add(new fabric.fabric.Object({hasBorders:true,hasControls:false,hasRotatingPoint:false,selectable:false,type:'rect'}));
252.       $("#drawingArea").hover(
253.            function() {               
254.                 canvas.add(line1);
255.                 canvas.add(line2);
256.                 canvas.add(line3);
257.                 canvas.add(line4);
258.                 canvas.renderAll();
259.            },
260.            function() {               
261.                 canvas.remove(line1);
262.                 canvas.remove(line2);
263.                 canvas.remove(line3);
264.                 canvas.remove(line4);
265.                 canvas.renderAll();
266.            }
267.        );
268.        
269.       $('.color-preview').click(function(){
270.           var color = $(this).css("background-color");
271.           document.getElementById("shirtDiv").style.backgroundColor = color;         
272.       });
273.        
274.        
275.                                
276.        
277.        
278.        
279.        
280.        
281.       $('#flip').click(
282.           function() {           
283.                if ($(this).attr("data-original-title") == "Show Back View") {
284.                    $(this).attr('data-original-title', 'Show Front View');                               
285.                    $("#tshirtFacing").attr("src","img/crew_back.png");                
286.                    a = JSON.stringify(canvas);
287.                    canvas.clear();
288.                    try
289.                    {
290.                       var json = JSON.parse(b);
291.                       canvas.loadFromJSON(b);
292.                    }
293.                    catch(e)
294.                    {}
295.                     
296.                } else {
297.                    $(this).attr('data-original-title', 'Show Back View');                                     
298.                    $("#tshirtFacing").attr("src","img/crew_front.png");                   
299.                    b = JSON.stringify(canvas);
300.                    canvas.clear();
301.                    try
302.                    {
303.                       var json = JSON.parse(a);
304.                       canvas.loadFromJSON(a);                    
305.                    }
306.                    catch(e)
307.                    {}
308.                }      
309.                canvas.renderAll();
310.                setTimeout(function() {
311.                    canvas.calcOffset();
312.                },200);            
313.        });   
314.       $(".clearfix button,a").tooltip();
315.       line1 = new fabric.Line([0,0,200,0], {"stroke":"#000000", "strokeWidth":1,hasBorders:false,hasControls:false,hasRotatingPoint:false,selectable:false});
316.       line2 = new fabric.Line([199,0,200,399], {"stroke":"#000000", "strokeWidth":1,hasBorders:false,hasControls:false,hasRotatingPoint:false,selectable:false});
317.       line3 = new fabric.Line([0,0,0,400], {"stroke":"#000000", "strokeWidth":1,hasBorders:false,hasControls:false,hasRotatingPoint:false,selectable:false});
318.       line4 = new fabric.Line([0,400,200,399], {"stroke":"#000000", "strokeWidth":1,hasBorders:false,hasControls:false,hasRotatingPoint:false,selectable:false});
319.     });//doc ready
320.      
321.      
322.      
323.          
324.      
325.     function getRandomNum(min, max) {
326.        return Math.random() * (max - min) + min;
327.     }
328.      
329.     function onObjectSelected(e) { 
330.        var selectedObject = e.target;
331.        $("#text-string").val("");
332.        selectedObject.hasRotatingPoint = true
333.        if (selectedObject && selectedObject.type === 'text') {
334.            //display text editor          
335.            $("#texteditor").css('display', 'block');
336.            $("#text-string").val(selectedObject.getText());           
337.            $('#text-fontcolor').miniColors('value',selectedObject.fill);
338.            $('#text-strokecolor').miniColors('value',selectedObject.strokeStyle); 
339.            $("#imageeditor").css('display', 'block');
340.        }
341.        else if (selectedObject && selectedObject.type === 'image'){
342.            //display image editor
343.            $("#texteditor").css('display', 'none');   
344.            $("#imageeditor").css('display', 'block');
345.        }
346.      }
347.     function onSelectedCleared(e){
348.         $("#texteditor").css('display', 'none');
349.         $("#text-string").val("");
350.         $("#imageeditor").css('display', 'none');
351.     }
352.     function setFont(font){
353.          var activeObject = canvas.getActiveObject();
354.          if (activeObject && activeObject.type === 'text') {
355.            activeObject.fontFamily = font;
356.            canvas.renderAll();
357.          }
358.      }
359.     function removeWhite(){
360.          var activeObject = canvas.getActiveObject();
361.          if (activeObject && activeObject.type === 'image') {           
362.              activeObject.filters[2] =  new fabric.Image.filters.RemoveWhite({hreshold: 100, distance: 10});//0-255, 0-255
363.              activeObject.applyFilters(canvas.renderAll.bind(canvas));
364.          }        
365.     }



แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-09-02 11:36:36 By : mama0154
 

 

No. 3



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



สถานะออฟไลน์
Facebook

มีใครพอมีแนวทางมัยหน๋ออ !! มืดแปดด้าน
แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-09-03 18:01:42 By : mama0154
 

 

No. 4



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

สมาชิกที่ใส่เสื้อไทยครีเอท

สถานะออฟไลน์
Twitter Blogger

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

Code (JavaScript)
001.var canvas;
002.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'}}]
003.var a;
004.var b;
005.var line1;
006.var line2;
007.var line3;
008.var line4;
009.var PRICE = 100;
010.    $(document).ready(function() {
011.        //setup front side canvas
012.        canvas = new fabric.Canvas('tcanvas', {
013.          hoverCursor: 'pointer',
014.          selection: true,
015.          selectionBorderColor:'blue'
016.        });
017.        canvas.on({
018.             'object:moving': function(e) {        
019.                e.target.opacity = 0.5;
020.              },
021.              'object:modified': function(e) {         
022.                e.target.opacity = 1;
023.              },
024.             'object:selected':onObjectSelected,
025.             'selection:cleared':onSelectedCleared
026.         });
027.        // piggyback on `canvas.findTarget`, to fire "object:over" and "object:out" events
028.        canvas.findTarget = (function(originalFn) {
029.          return function() {
030.            var target = originalFn.apply(this, arguments);
031.            if (target) {
032.              if (this._hoveredTarget !== target) {
033.                  canvas.fire('object:over', { target: target });
034.                if (this._hoveredTarget) {
035.                    canvas.fire('object:out', { target: this._hoveredTarget });
036.                }
037.                this._hoveredTarget = target;
038.              }
039.            }
040.            else if (this._hoveredTarget) {
041.                canvas.fire('object:out', { target: this._hoveredTarget });
042.              this._hoveredTarget = null;
043.            }
044.            return target;
045.          };
046.        })(canvas.findTarget);
047. 
048.        canvas.on('object:over', function(e) {     
049.          //e.target.setFill('red');
050.          //canvas.renderAll();
051.        });
052.         
053.        canvas.on('object:out', function(e) {      
054.          //e.target.setFill('green');
055.          //canvas.renderAll();
056.        });
057.                      
058.        document.getElementById('add-text').onclick = function() {
059.            var text = $("#text-string").val();
060.            var textSample = new fabric.Text(text, {
061.              left: fabric.util.getRandomInt(0, 200),
062.              top: fabric.util.getRandomInt(0, 400),
063.              fontFamily: 'helvetica',
064.              angle: 0,
065.              fill: '#000000',
066.              scaleX: 0.5,
067.              scaleY: 0.5,
068.              fontWeight: '',
069.              hasRotatingPoint:true
070.            });        
071.            canvas.add(textSample);
072.            canvas.item(canvas.item.length-1).hasRotatingPoint = true;   
073.            $("#texteditor").css('display', 'block');
074.            $("#imageeditor").css('display', 'block');
075.        };
076.        $("#text-string").keyup(function(){        
077.            var activeObject = canvas.getActiveObject();
078.              if (activeObject && activeObject.type === 'text') {
079.                  activeObject.text = this.value;
080.                  canvas.renderAll();
081.              }
082.        });
083.        $(".img-polaroid").click(function(e){
084.            var el = e.target;
085.            /*temp code*/
086.            var offset = 50;
087.            var left = fabric.util.getRandomInt(0 + offset, 200 - offset);
088.            var top = fabric.util.getRandomInt(0 + offset, 400 - offset);
089.            var angle = fabric.util.getRandomInt(-20, 40);
090.            var width = fabric.util.getRandomInt(30, 50);
091.            var opacity = (function(min, max){ return Math.random() * (max - min) + min; })(0.5, 1);
092.             
093.            fabric.Image.fromURL(el.src, function(image) {
094.                  image.set({
095.                    left: left,
096.                    top: top,
097.                    angle: 0,
098.                    padding: 10,
099.                    cornersize: 10,
100.                    hasRotatingPoint:true
101.                  });
102.                  //image.scale(getRandomNum(0.1, 0.25)).setCoords();
103.                  canvas.add(image);
104.                  window.PRICE += 50;
105.                  alert(window.PRICE);
106.                });
107.        });          
108.      document.getElementById('remove-selected').onclick = function() {      
109.            var activeObject = canvas.getActiveObject(),
110.                activeGroup = canvas.getActiveGroup();
111.            if (activeObject) {
112.              if (activeObject.get('type')=='image'){
113.                window.PRICE -= 50;
114.                alert(window.PRICE);
115.              }
116.              canvas.remove(activeObject);
117.              $("#text-string").val("");
118.            }
119.            else if (activeGroup) {
120.              var objectsInGroup = activeGroup.getObjects();
121.              canvas.discardActiveGroup();
122.              objectsInGroup.forEach(function(object) {
123.                if (object.get('type')=='image'){
124.                   window.PRICE -= 50;
125.                   alert(window.PRICE);
126.                }
127.                canvas.remove(object);             
128.              });
129.            }
130.      };
131.      document.getElementById('bring-to-front').onclick = function() {       
132.            var activeObject = canvas.getActiveObject(),
133.                activeGroup = canvas.getActiveGroup();
134.            if (activeObject) {
135.              activeObject.bringToFront();
136.            }
137.            else if (activeGroup) {
138.              var objectsInGroup = activeGroup.getObjects();
139.              canvas.discardActiveGroup();
140.              objectsInGroup.forEach(function(object) {
141.                object.bringToFront();
142.              });
143.            }
144.      };
145.      document.getElementById('send-to-back').onclick = function() {         
146.            var activeObject = canvas.getActiveObject(),
147.                activeGroup = canvas.getActiveGroup();
148.            if (activeObject) {
149.              activeObject.sendToBack();
150.            }
151.            else if (activeGroup) {
152.              var objectsInGroup = activeGroup.getObjects();
153.              canvas.discardActiveGroup();
154.              objectsInGroup.forEach(function(object) {
155.                object.sendToBack();
156.              });
157.            }
158.      };         
159.      $("#text-bold").click(function() {         
160.          var activeObject = canvas.getActiveObject();
161.          if (activeObject && activeObject.type === 'text') {
162.            activeObject.fontWeight = (activeObject.fontWeight == 'bold' ? '' : 'bold');           
163.            canvas.renderAll();
164.          }
165.        });
166.      $("#text-italic").click(function() {      
167.          var activeObject = canvas.getActiveObject();
168.          if (activeObject && activeObject.type === 'text') {
169.              activeObject.fontStyle = (activeObject.fontStyle == 'italic' ? '' : 'italic');           
170.            canvas.renderAll();
171.          }
172.        });
173.      $("#text-strike").click(function() {       
174.          var activeObject = canvas.getActiveObject();
175.          if (activeObject && activeObject.type === 'text') {
176.              activeObject.textDecoration = (activeObject.textDecoration == 'line-through' ? '' : 'line-through');
177.            canvas.renderAll();
178.          }
179.        });
180.      $("#text-underline").click(function() {        
181.          var activeObject = canvas.getActiveObject();
182.          if (activeObject && activeObject.type === 'text') {
183.              activeObject.textDecoration = (activeObject.textDecoration == 'underline' ? '' : 'underline');
184.            canvas.renderAll();
185.          }
186.        });
187.      $("#text-left").click(function() {         
188.          var activeObject = canvas.getActiveObject();
189.          if (activeObject && activeObject.type === 'text') {
190.              activeObject.textAlign = 'left';
191.            canvas.renderAll();
192.          }
193.        });
194.      $("#text-center").click(function() {       
195.          var activeObject = canvas.getActiveObject();
196.          if (activeObject && activeObject.type === 'text') {
197.              activeObject.textAlign = 'center';           
198.            canvas.renderAll();
199.          }
200.        });
201.      $("#text-right").click(function() {        
202.          var activeObject = canvas.getActiveObject();
203.          if (activeObject && activeObject.type === 'text') {
204.              activeObject.textAlign = 'right';        
205.            canvas.renderAll();
206.          }
207.        });  
208.      $("#font-family").change(function() {
209.          var activeObject = canvas.getActiveObject();
210.          if (activeObject && activeObject.type === 'text') {
211.            activeObject.fontFamily = this.value;
212.            canvas.renderAll();
213.          }
214.        });  
215.        $('#text-bgcolor').miniColors({
216.            change: function(hex, rgb) {
217.              var activeObject = canvas.getActiveObject();
218.              if (activeObject && activeObject.type === 'text') {
219.                  activeObject.backgroundColor = this.value;
220.                canvas.renderAll();
221.              }
222.            },
223.            open: function(hex, rgb) {
224.                //
225.            },
226.            close: function(hex, rgb) {
227.                //
228.            }
229.        });    
230.        $('#text-fontcolor').miniColors({
231.            change: function(hex, rgb) {
232.              var activeObject = canvas.getActiveObject();
233.              if (activeObject && activeObject.type === 'text') {
234.                  activeObject.fill = this.value;
235.                  canvas.renderAll();
236.              }
237.            },
238.            open: function(hex, rgb) {
239.                //
240.            },
241.            close: function(hex, rgb) {
242.                //
243.            }
244.        });
245.         
246.        $('#text-strokecolor').miniColors({
247.            change: function(hex, rgb) {
248.              var activeObject = canvas.getActiveObject();
249.              if (activeObject && activeObject.type === 'text') {
250.                  activeObject.strokeStyle = this.value;
251.                  canvas.renderAll();
252.              }
253.            },
254.            open: function(hex, rgb) {
255.                //
256.            },
257.            close: function(hex, rgb) {
258.                //
259.            }
260.        });
261.     
262.        //canvas.add(new fabric.fabric.Object({hasBorders:true,hasControls:false,hasRotatingPoint:false,selectable:false,type:'rect'}));
263.       $("#drawingArea").hover(
264.            function() {               
265.                 canvas.add(line1);
266.                 canvas.add(line2);
267.                 canvas.add(line3);
268.                 canvas.add(line4);
269.                 canvas.renderAll();
270.            },
271.            function() {               
272.                 canvas.remove(line1);
273.                 canvas.remove(line2);
274.                 canvas.remove(line3);
275.                 canvas.remove(line4);
276.                 canvas.renderAll();
277.            }
278.        );
279.        
280.       $('.color-preview').click(function(){
281.           var color = $(this).css("background-color");
282.           document.getElementById("shirtDiv").style.backgroundColor = color;         
283.       });
284.        
285.       $('#flip').click(
286.           function() {           
287.                if ($(this).attr("data-original-title") == "Show Back View") {
288.                    $(this).attr('data-original-title', 'Show Front View');                               
289.                    $("#tshirtFacing").attr("src","img/crew_back.png");                
290.                    a = JSON.stringify(canvas);
291.                    canvas.clear();
292.                    try
293.                    {
294.                       var json = JSON.parse(b);
295.                       canvas.loadFromJSON(b);
296.                    }
297.                    catch(e)
298.                    {}
299.                     
300.                } else {
301.                    $(this).attr('data-original-title', 'Show Back View');                                     
302.                    $("#tshirtFacing").attr("src","img/crew_front.png");                   
303.                    b = JSON.stringify(canvas);
304.                    canvas.clear();
305.                    try
306.                    {
307.                       var json = JSON.parse(a);
308.                       canvas.loadFromJSON(a);                    
309.                    }
310.                    catch(e)
311.                    {}
312.                }      
313.                canvas.renderAll();
314.                setTimeout(function() {
315.                    canvas.calcOffset();
316.                },200);            
317.        });   
318.       $(".clearfix button,a").tooltip();
319.       line1 = new fabric.Line([0,0,200,0], {"stroke":"#000000", "strokeWidth":1,hasBorders:false,hasControls:false,hasRotatingPoint:false,selectable:false});
320.       line2 = new fabric.Line([199,0,200,399], {"stroke":"#000000", "strokeWidth":1,hasBorders:false,hasControls:false,hasRotatingPoint:false,selectable:false});
321.       line3 = new fabric.Line([0,0,0,400], {"stroke":"#000000", "strokeWidth":1,hasBorders:false,hasControls:false,hasRotatingPoint:false,selectable:false});
322.       line4 = new fabric.Line([0,400,200,399], {"stroke":"#000000", "strokeWidth":1,hasBorders:false,hasControls:false,hasRotatingPoint:false,selectable:false});
323.     });//doc ready
324.      
325.      
326.     function getRandomNum(min, max) {
327.        return Math.random() * (max - min) + min;
328.     }
329.      
330.     function onObjectSelected(e) { 
331.        var selectedObject = e.target;
332.        $("#text-string").val("");
333.        selectedObject.hasRotatingPoint = true
334.        if (selectedObject && selectedObject.type === 'text') {
335.            //display text editor          
336.            $("#texteditor").css('display', 'block');
337.            $("#text-string").val(selectedObject.getText());           
338.            $('#text-fontcolor').miniColors('value',selectedObject.fill);
339.            $('#text-strokecolor').miniColors('value',selectedObject.strokeStyle); 
340.            $("#imageeditor").css('display', 'block');
341.        }
342.        else if (selectedObject && selectedObject.type === 'image'){
343.            //display image editor
344.            $("#texteditor").css('display', 'none');   
345.            $("#imageeditor").css('display', 'block');
346.        }
347.      }
348.     function onSelectedCleared(e){
349.         $("#texteditor").css('display', 'none');
350.         $("#text-string").val("");
351.         $("#imageeditor").css('display', 'none');
352.     }
353.     function setFont(font){
354.          var activeObject = canvas.getActiveObject();
355.          if (activeObject && activeObject.type === 'text') {
356.            activeObject.fontFamily = font;
357.            canvas.renderAll();
358.          }
359.      }
360.     function removeWhite(){
361.          var activeObject = canvas.getActiveObject();
362.          if (activeObject && activeObject.type === 'image') {           
363.              activeObject.filters[2] =  new fabric.Image.filters.RemoveWhite({hreshold: 100, distance: 10});//0-255, 0-255
364.              activeObject.applyFilters(canvas.renderAll.bind(canvas));
365.          }        
366.     }

แสดงความคิดเห็นโดยอ้างถึง ความคิดเห็นนี้
Date : 2016-09-03 18:51:32 By : num
 

   

ค้นหาข้อมูล


   
 

แสดงความคิดเห็น
Re : ขอคำแนะนำในการคำนวนราคาจากการใช้ OnClick ตอนนี้กำลังทำโปรเจคจบอยู่ครับ....ไม่อยากจ้างเขา....ผมคิดว่าถ้าพยายามก็น่าจะทำได้
 
 
รายละเอียด
 
ตัวหนา ตัวเอียง ตัวขีดเส้นใต้ ตัวมีขีดกลาง| ตัวเรืองแสง ตัวมีเงา ตัวอักษรวิ่ง| จัดย่อหน้าอิสระ จัดย่อหน้าชิดซ้าย จัดย่อหน้ากึ่งกลาง จัดย่อหน้าชิดขวา| เส้นขวาง| ขนาดตัวอักษร แบบตัวอักษร
ใส่แฟลช ใส่รูป ใส่ไฮเปอร์ลิ้งค์ ใส่อีเมล์ ใส่ลิ้งค์ FTP| ใส่แถวของตาราง ใส่คอลัมน์ตาราง| ตัวยก ตัวห้อย ตัวพิมพ์ดีด| ใส่โค้ด ใส่การอ้างถึงคำพูด| ใส่ลีสต์
smiley for :lol: smiley for :ken: smiley for :D smiley for :) smiley for ;) smiley for :eek: smiley for :geek: smiley for :roll: smiley for :erm: smiley for :cool: smiley for :blank: smiley for :idea: smiley for :ehh: smiley for :aargh: smiley for :evil:
Insert PHP Code
Insert ASP Code
Insert VB.NET Code Insert C#.NET Code Insert JavaScript Code Insert C#.NET Code
Insert Java Code
Insert Android Code
Insert Objective-C Code
Insert XML Code
Insert SQL Code
Insert Code
เพื่อความเรียบร้อยของข้อความ ควรจัดรูปแบบให้พอดีกับขนาดของหน้าจอ เพื่อง่ายต่อการอ่านและสบายตา และตรวจสอบภาษาไทยให้ถูกต้อง

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

Notice

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

   
  เพื่อความปลอดภัยและการตรวจสอบ กระทู้ที่แทรกไฟล์อัพโหลดไฟล์จากที่อื่น อาจจะถูกลบทิ้ง
 
โดย
อีเมล์
บวกค่าให้ถูก
<= ตัวเลขฮินดูอารบิก เช่น 123 (หรือล็อกอินเข้าระบบสมาชิกเพื่อไม่ต้องกรอก)





Load balance : Server 01
ThaiCreate.Com Logo
© www.ThaiCreate.Com. 2003-2025 All Rights Reserved.
ไทยครีเอทบริการ จัดทำดูแลแก้ไข Web Application ทุกรูปแบบ (PHP, .Net Application, VB.Net, C#)
[Conditions Privacy Statement] ติดต่อโฆษณา 081-987-6107 อัตราราคา คลิกที่นี่