帆布Scratchcard ..坐标

Question

嗨，任何人都可以帮助我。

所以我正在使用画布创建刮刮卡效果。当我通过使用CSS设置宽度为100％来使画布响应时，从头开始的坐标看起来不合适。有谁知道如何解决这个问题，因为我已将画布宽度设置为与图像宽度相同的宽度？

(function() { 

var image = { 
    'back': { 'url':'DAY1.jpg', 'img':null }, 
    'front': { 'url':'COVER.jpg', 'img':null } 
}; 

var canvas = {'temp':null, 'draw':null}; 

var mouseDown = false; 


function getLocalCoords(elem, ev) { 
    var ox = 0, oy = 0; 
    var first; 
    var pageX, pageY; 


    while (elem != null) { 
     ox += elem.offsetLeft; 
     oy += elem.offsetTop; 
     elem = elem.offsetParent; 
    } 

    if (ev.hasOwnProperty('changedTouches')) { 
     first = ev.changedTouches[0]; 
     pageX = first.pageX; 
     pageY = first.pageY; 
    } else { 
     pageX = ev.pageX; 
     pageY = ev.pageY; 
    } 

    return { 'x': pageX - ox, 'y': pageY - oy }; 
} 


function recompositeCanvases() { 
    var main = document.getElementById('maincanvas'); 
    var tempctx = canvas.temp.getContext('2d'); 
    var mainctx = main.getContext('2d'); 

    canvas.temp.width = canvas.temp.width; 

    tempctx.drawImage(canvas.draw, 0, 0); 


    tempctx.globalCompositeOperation = 'source-atop'; 
    tempctx.drawImage(image.back.img, 0, 0); 


    mainctx.drawImage(image.front.img, 0, 0); 
    mainctx.drawImage(canvas.temp, 0, 0); 
} 


function scratchLine(can, x, y, fresh) { 
    var ctx = can.getContext('2d'); 
    ctx.lineWidth = 50; 
    ctx.lineCap = ctx.lineJoin = 'round'; 
    ctx.strokeStyle = '#f00'; // can be any opaque color 
    if (fresh) { 
     ctx.beginPath(); 

     ctx.moveTo(x+0.01, y); 
    } 
    ctx.lineTo(x, y); 
    ctx.stroke(); 
} 



function setupCanvases() { 
    var c = document.getElementById('maincanvas'); 

    c.width = image.back.img.width; 
    c.height = image.back.img.height; 


    canvas.temp = document.createElement('canvas'); 
    canvas.draw = document.createElement('canvas'); 
    canvas.temp.width = canvas.draw.width = c.width; 
    canvas.temp.height = canvas.draw.height = c.height; 

    recompositeCanvases(); 

    function mousedown_handler(e) { 
     var local = getLocalCoords(c, e); 
     mouseDown = true; 

     scratchLine(canvas.draw, local.x, local.y, true); 
     recompositeCanvases(); 

     if (e.cancelable) { e.preventDefault(); } 
     return false; 
    }; 


    function mousemove_handler(e) { 
     if (!mouseDown) { return true; } 

     var local = getLocalCoords(c, e); 

     scratchLine(canvas.draw, local.x, local.y, false); 
     recompositeCanvases(); 

     if (e.cancelable) { e.preventDefault(); } 
     return false; 
    }; 


    function mouseup_handler(e) { 
     if (mouseDown) { 
      mouseDown = false; 
      if (e.cancelable) { e.preventDefault(); } 
      return false; 
     } 

     return true; 
    }; 

    c.addEventListener('mousedown', mousedown_handler, false); 
    c.addEventListener('touchstart', mousedown_handler, false); 

    window.addEventListener('mousemove', mousemove_handler, false); 
    window.addEventListener('touchmove', mousemove_handler, false); 

    window.addEventListener('mouseup', mouseup_handler, false); 
    window.addEventListener('touchend', mouseup_handler, false); 
} 


function loadingComplete() { 
    var loading = document.getElementById('loading'); 
    var main = document.getElementById('main'); 

    loading.className = 'hidden'; 
    main.className = ''; 
} 


function loadImages() { 
    var loadCount = 0; 
    var loadTotal = 0; 
    var loadingIndicator; 

    function imageLoaded(e) { 
     loadCount++; 

     if (loadCount >= loadTotal) { 
      setupCanvases(); 
      loadingComplete(); 
     } 
    } 

    for (k in image) if (image.hasOwnProperty(k)) 
     loadTotal++; 

    for (k in image) if (image.hasOwnProperty(k)) { 
     image[k].img = document.createElement('img'); 
     image[k].img.addEventListener('load', imageLoaded, false); 
     image[k].img.src = image[k].url; 
    } 
} 


window.addEventListener('load', function() { 
    var resetButton = document.getElementById('resetbutton'); 

    loadImages(); 

    resetButton.addEventListener('click', function() { 

      canvas.draw.width = canvas.draw.width; 
      recompositeCanvases() 

      return false; 
     }, false); 

}, false); 

})(); 

Answer 1

您需要更改鼠标/触摸坐标规模相匹配的屏幕的分辨率

// in your function 
function getLocalCoords(elem, ev) { 
    var ox = 0, oy = 0; 
    var first; 
    var pageX, pageY; 

    //============================================================== 
    // Add the following to get the bounding box of the canvas 
    // assuming elem is the canvas 
    const bounds = elem.getBoundingClientRect(); 
    const canEl = elem; // save canvas element for use further down 
    //-------------------------------------------------------------- 

    // your code.... 
    while (elem != null) { 
     ox += elem.offsetLeft; 
     oy += elem.offsetTop; 
     elem = elem.offsetParent; 
    } 

    if (ev.hasOwnProperty('changedTouches')) { 
     first = ev.changedTouches[0]; 
     pageX = first.pageX; 
     pageY = first.pageY; 
    } else { 
     pageX = ev.pageX; 
     pageY = ev.pageY; 
    } 

    //============================================================== 
    // add these two lines to scale to match the canvas coordinates 
    pageX = ((pageX - ox)/bounds.width) * canEl.width; 
    pageY = ((pageY - oy)/bounds.height) * canEl.height; 

    // and modify your code to 
    return { 'x': pageX, 'y': pageY }; 
    //-------------------------------------------------------------- 
}