Question

绘图未与鼠标指针同步，同样适用于触摸屏。我为鼠标坐标设置了函数getMouse（e）偏移，为触摸坐标设置了函数绘制（事件）。它只适用于我的电脑。它与不同的触摸屏电脑不兼容。我应该在哪里做出改变以及如何改变请帮忙。

这是编码

HTML

<button onClick="openPopup();">drawing</button>
<div id="test" class="popup" >
<canvas id="canvas1" width="790" height="1110" style=" border:solid #00F"> </canvas>
<p>&nbsp;</p>
</div>

CSS

   <style>
    #canvas1 {
        left:0;  /* adjust as needed */
        top:0;
        position: inline;
        width: 100%;
        height: 100%;
    }
    .popup{
        position:absolute;
        top:0px;
        left:0px;
        margin:0px;
        width: 764px;
        height: 1120px;
        font-family:verdana;
        font-size:13px;
        background-color:rgba(255, 255, 255, 0);
        border:2px solid green; 
        z-index:100000000000000000;
        display:none; 
        opacity:0.6; 
        filter:alpha(opacity=60);
        margin-left: 400px; 
        margin-top: 100px;
    }
    .cancel{
        display:relative;
        cursor:pointer;
        margin:0;
        float:right;
        height:10px;
        width:14px;
        padding:0 0 5px 0;
        background-image:url(/images/icon-cross.png);
        text-align:center;
        font-weight:bold;
        font-size:11px;
        color:white;
        border-radius:3px;
        z-index:100000000000000000;
    }
    .cancel:hover{
        background-color:#09F;
    }
    </style>

脚本：

<script>
function openPopup() {   
    var p = document.getElementById('test');
    p.style.display = 'block';

    canvas.width  = parseInt(p.style.width, '10'); //only when you use pixels
    canvas.height = parseInt(p.style.height, '10');
}

function closePopup() {
    document.getElementById('test').style.display = 'none';
}



function choosecolor(cps) {
    ctx.strokeStyle = cps; // red
}

var can = document.getElementById('canvas1');
var ctx = can.getContext('2d');

var isPressed = false;
var mx = 4, my = 4;
//http://stackoverflow.com/questions/2142535/how-to-clear-the-canvas-for-redrawing
function clear_canvas_width ()
{
    var s = document.getElementById ("canvas1");
    var w = s.width;
    s.width = 4;
    s.width = w;
    ctx.clear();
}


function move(e) {
  getMouse(e);
  if (isPressed) {
    ctx.lineTo(mx, my);
    ctx.stroke()
  }
}

function up(e) {
  getMouse(e);
  isPressed = false;
}

function down(e) {
  getMouse(e);
  ctx.beginPath();
  ctx.moveTo(mx, my);
  isPressed = true;
}

can.onmousemove = move;
can.onmousedown = down;
can.onmouseup = up;

// for mouse:


function getMouse(e) {
    var element = can, offsetX = 0, offsetY = 0;
    mx = e.pageX - 400;
    my = e.pageY - 108;
}



        /*For touch screen*/ 
        window.addEventListener('load',function(){
        // get the canvas element and its context
        var canvas = document.getElementById('canvas1');
        var context = canvas.getContext('2d');

        // create a drawer which tracks touch movements
        var drawer = {
            isDrawing: false,
            touchstart: function(coors){
                context.beginPath();
                context.moveTo(coors.x, coors.y);
                this.isDrawing = true;
            },
            touchmove: function(coors){
                if (this.isDrawing) {
                    context.lineTo(coors.x, coors.y);
                    context.stroke();
                }
            },
            touchend: function(coors){
                if (this.isDrawing) {
                    this.touchmove(coors);
                    this.isDrawing = false;
                }
            }
        };
        // create a function to pass touch events and coordinates to drawer
        function draw(event){

            // get the touch coordinates
            var coors = {
                x: event.targetTouches[0].pageX - 400,
                y: event.targetTouches[0].pageY - 100
            };
            // pass the coordinates to the appropriate handler
            drawer[event.type](coors);
        }

        // attach the touchstart, touchmove, touchend event listeners.
        canvas.addEventListener('touchstart',draw, false);
        canvas.addEventListener('touchmove',draw, false);
        canvas.addEventListener('touchend',draw, false);

        // prevent elastic scrolling
        document.body.addEventListener('touchmove',function(event){
            event.preventDefault();
        },false);   // end body.onTouchMove

    },false);   // end window.onLoad
</script>

Answer 1

将您的getMouse更改为此，它应该有效：

function getMouse(e) {
    mx = e.clientX - canvas.offsetLeft;
    my = e.clientY - canvas.offsetTop;
}

鼠标位置相对于整个页面，因此您需要减去canvas元素的偏移量以使它们相对于画布。

画布偏移 - 鼠标指针未同步

1 个答案: