gary_wms/app/assets/js/signature/drawWord.js

/**
 * 开始触摸
 * @param event
 * @returns
 */
function onDocumentTouchStart( event ) {
    if( event.touches.length == 1 ) {
        event.preventDefault();
        // Faking double click for touch devices
        var now = new Date().getTime();
        if ( now - timeOfLastTouch  < 250 ) {
            reset();
            return;
        }
        timeOfLastTouch = now;
        mouseX = event.touches[ 0 ].pageX;
        mouseY = event.touches[ 0 ].pageY;
        isMouseDown = true;
    }
}
/**
 * 触摸移动
 * @param event
 * @returns
 */
function onDocumentTouchMove( event ) {
    if ( event.touches.length == 1 ) {
        event.preventDefault();
        mouseX = event.touches[ 0 ].pageX;
        mouseY = event.touches[ 0 ].pageY;
    }
}

/**
 * 结束触摸
 * @param event
 * @returns
 */
function onDocumentTouchEnd( event ) {
    if ( event.touches.length == 0 ) {
        event.preventDefault();
        isMouseDown = false;
    }
}

/*var canvasDiv = document.getElementById('canvasDiv');
var canvas = document.createElement('canvas');
var canvasWidth = 1191;
var canvasHeight=670;
document.addEventListener( 'touchmove', onDocumentTouchMove, false );
var point = {};
point.notFirst = false;
canvas.setAttribute('width', canvasWidth);
canvas.setAttribute('height', canvasHeight);
canvas.setAttribute('id', 'canvas');
canvasDiv.appendChild(canvas);
if(typeof G_vmlCanvasManager != 'undefined') {
	canvas = G_vmlCanvasManager.initElement(canvas);
}*/
/*var context = canvas.getContext("2d");
var img = new Image();
img.src = "./a.jpg";
img.onload = function(){
    var ptrn = context.createPattern(img,'no-repeat');
    context.fillStyle = ptrn;
    context.fillRect(0, 0, canvas.width, canvas.height);
}*/
/**
 * 触摸开始
 * @param e
 * @returns
 */
canvas.addEventListener("touchstart", function(e){
  var mouseX = e.pageX - this.offsetLeft;
  var mouseY = e.pageY - this.offsetTop;
  paint = true;
  addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
  redraw();
});

/**
 * 触摸结束
 * @param e
 * @returns
 */
canvas.addEventListener("touchend", function(e){
   paint = false;
});

/**
 * 触摸移动
 * @param e
 * @returns
 */
canvas.addEventListener("touchmove", function(e){
	 if(paint){
	    addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
	    redraw();
	  }
});

/**
 * 鼠标按下
 * @param e
 * @returns
 */
canvas.addEventListener("mousedown", function(e){
  var mouseX = e.pageX - this.offsetLeft;
  var mouseY = e.pageY - this.offsetTop;
  paint = true;
  addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
  redraw();
});

/**
 * 鼠标移动
 * @param e
 * @returns
 */
canvas.addEventListener("mousemove", function(e){

  if(paint){

    addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);

    redraw();
  }
});

/**
 * 鼠标松开
 * @param e
 * @returns
 */
canvas.addEventListener("mouseup", function(e){
  paint = false;
});

/**
 * 鼠标移开
 * @param e
 * @returns
 */
canvas.addEventListener("mouseleave", function(e){
  paint = false;
});

var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;

function addClick(x, y, dragging){
  clickX.push(x);
  clickY.push(y);
  clickDrag.push(dragging);
}

function redraw(){
  //canvas.width = canvas.width; // Clears the canvas
  context.strokeStyle = "#df4b26";
  context.lineJoin = "round";
  context.lineWidth = 2;
  while (clickX.length > 0 ) {
	  point.bx = point.x;
	  point.by = point.y;
	  point.x = clickX.pop();
	  point.y = clickY.pop();
	  point.drag = clickDrag.pop();
	  context.beginPath();
	  if (point.drag && point.notFirst) {
		  context.moveTo(point.bx, point.by);
	  } else {
		  point.notFirst = true;
		  context.moveTo(point.x - 1, point.y);
	  }
     context.lineTo(point.x, point.y);
     context.closePath();
     context.stroke();
  	}
  }