สอบถามวิธีการเรียกใช้งาน JavaScript

พูดคุย แลกเปลี่ยน ปัญหา การเขียน JavaScript เครื่องมือ AJAX Web 2.0 AJAX Framework Jquery

Moderator: mindphp

ภาพประจำตัวสมาชิก
Ik Kat
PHP Super Member
PHP Super Member
โพสต์: 291
ลงทะเบียนเมื่อ: 26/06/2017 2:32 pm

สอบถามวิธีการเรียกใช้งาน JavaScript

โพสต์โดย Ik Kat » 16/08/2017 4:28 pm

15-08-60(01).png

ระบบเดิมใช้ signature.js คือ สามารถวาดเส้นลงใน canvas ได้เลยค่ะ
แต่ในที่นี้ต้องการให้ คลิกที่ปุ่ม ก่อนถึงจะให้มีการวาดเส้นลงไปได้ ต้องแก้ไขส่วนไหนบ้างค่ะ


signature.js :

โค้ด: เลือกทั้งหมด

var Signature = Class.create();
Object.extend(Signature.prototype, {
  initialize: function (element, field) {
            this.paths = [];
            this.penDown = true;
            this.canvas = $(element); // the drawing canvas
            this.ctx = this.canvas.getContext('2d');
            if ( field ) {
               this.field = $(field); // an optional hidden field to store the drawing paths
            }
            this.showGuide = true;
            
            // add observers here
            Event.observe(document.body,'mouseup', this.mouseUp.bindAsEventListener(this));
            Event.observe(this.canvas,'mousedown', this.mouseDown.bindAsEventListener(this));
            Event.observe(this.canvas,'mousemove', this.mouseMove.bindAsEventListener(this));
            if (this.showGuide) {
               this.redraw();
            }

            // for touch enabled browsers -- prototype 1.5 doesn't support these events??
            try {
               this.canvas.addEventListener('touchstart',this.mouseDown.bindAsEventListener(this),false);
               this.canvas.addEventListener('touchmove',this.mouseMove.bindAsEventListener(this),false);
   
               document.body.addEventListener('touchend',this.mouseUp.bindAsEventListener(this),false);
               document.body.addEventListener('touchmove',function(event){
                 Event.stop(event);
               },false);
            } catch( e ) {
               // ignore if errors, browser doesn't support touch events
            }
           },
  mouseDown: function(event) {
              var point = this.getRelativePoint(event);
              this.paths.push( [ point ] );
            this.ctx.fillRect(point.x,point.y,1,1);
            this.penDown = true;
            this.updateField();
           },
  mouseUp: function(event) {
             this.penDown = false;
             this.ctx.closePath();
            if ( Prototype.Browser.IE && event.srcElement.tagName != "INPUT" ) {
               var ver = getInternetExplorerVersion();
               if ( ver >= 8 && ver < 9 && document.selection ) {
                  document.selection.empty();
               }
            }
         },
  mouseMove: function(event) {
            if ( this.penDown ) {
               var lastPath = this.paths[ this.paths.length - 1 ];
               var lastPoint = lastPath[ lastPath.length - 1 ];
               var point = this.getRelativePoint(event);
               lastPath.push( point );
               this.ctx.strokeStyle = "#000000";
               this.ctx.beginPath();
               this.ctx.moveTo(lastPoint.x,lastPoint.y);
               this.ctx.lineTo(point.x, point.y);
               this.ctx.stroke();
               this.ctx.closePath();
               this.updateField();
            }
          },
  getRelativePoint: function(event) {
                 if ( event.touches ) {
                  var point = { x: event.touches[0].clientX, y: event.touches[0].clientY };
                 } else {
                  var point = { x: Event.pointerX(event), y: Event.pointerY(event) }
                 }
                 this.offset = Position.cumulativeOffset(this.canvas);
                 point.x -= this.offset[0]; point.y -= this.offset[1];
                 return point;
               },
  clear: function() {
         this.paths.length = 0;
         this.redraw();
       },
  redraw: function() {
         this.ctx.clearRect(0,0,this.canvas.getWidth(),this.canvas.getHeight());
         this.draw();
      },
  draw: function() {
/*         if ( this.showGuide ) {
            var guideOffset = this.canvas.getHeight() * .8;
            this.ctx.beginPath();
            this.ctx.strokeStyle = "#FFCC00";
            this.ctx.moveTo(10,guideOffset);
            this.ctx.lineTo(290,guideOffset);
            this.ctx.closePath();
            this.ctx.stroke();
         }
         */
         if ( this.paths.length > 0) {
            this.ctx.strokeStyle = "#000000";
            for ( var path in this.paths ) {
               this.ctx.fillRect(path[0].x,path[0].y,1,1);
               this.ctx.beginPath();
               this.ctx.moveTo(path[0].x,path[0].y);
               for ( var point in path ) {
                  this.ctx.lineTo(point.x, point.y);
               }
               this.ctx.closePath();
               this.ctx.stroke();
            }
         }
      },
  updateField: function() {
                 if ( this.field ) {
                 this.field.value = this.paths.toJSON();
              }
                }
});

function getInternetExplorerVersion() {
   var rv = -1;
   if (navigator.appName == 'Microsoft Internet Explorer') {
      var ua = navigator.userAgent;
      var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
      if (re.exec(ua) != null)
         rv = parseFloat(RegExp.$1);
   }
   return rv;
 }


test:

โค้ด: เลือกทั้งหมด

function getDataID(canvas_id)
{
//    alert(document.getElementById(canvas_id).getContext("2d"));
    var dataURL = document.getElementById(canvas_id).toDataURL();
    document.getElementById('paths').value = dataURL ;
   // alert(dataURL);
}

โค้ด: เลือกทั้งหมด

Event.observe(window,"load", function() {
      // write up events
      var signature = new Signature('cc','paths');
      $('clear').onclick = function() { signature.clear(); return false; }
    });
คุณไม่มีสิทธิ์ดูไฟล์ที่แนบมาในกระทู้

ภาพประจำตัวสมาชิก
บัวบุญ จันทะโคตร
PHP Super Member
PHP Super Member
โพสต์: 227
ลงทะเบียนเมื่อ: 26/06/2017 10:15 am

Re: สอบถามวิธีการเรียกใช้งาน JavaScript

โพสต์โดย บัวบุญ จันทะโคตร » 17/08/2017 3:05 pm

ลองใช้ modal ของ bootstrap เป็นแบบปุ่ม โดยสร้างปุ่ม bootstrap modal ไว้ แล้วเอาโค้ดที่ต้องการใส่เข้าไปข้างในอีกที https://www.w3schools.com/bootstrap/try ... &stacked=h ตัวอย่างลองประยุกต์ดู


ย้อนกลับไปยัง

ผู้ใช้งานขณะนี้

กำลังดูบอร์ดนี้: 3 และ บุคคลทั่วไป 0 ท่าน