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

พูดคุยแลกเปลี่ยน ปัญหา การเขียน JavaScript เครื่องมือ AJAX Web 2.0 AJAX Framework jQuery และ Node.JS รวมถึง Framework Express ของ Node.JS ทำงานฝั่ง Server

Moderator: mindphp

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

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

โพสต์ที่ยังไม่ได้อ่าน โดย Ik Kat »

15-08-60(01).png
15-08-60(01).png (15.28 KiB) Viewed 2740 times
ระบบเดิมใช้ 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

โพสต์ที่ยังไม่ได้อ่าน โดย บัวบุญ จันทะโคตร »

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

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

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 30