0

问题

如何让线条绘制光标所在的位置？

细节

我正在尝试使用 MrDoob 的和谐脚本（https://github.com/mshuler/harmony）在 html5 画布上徒手画一条线。我已经编辑了画布，使其具有特定的宽度和高度（在它覆盖整个页面之前）。然后我使用以下 CSS 定位它

canvas 
{
    position:absolute;
    top:0px; left:0px;
}

当我在画布上绘制（使用鼠标）时，线条是按照正常方式绘制的，但是如果我像这样定位画布

canvas 
{
    position:absolute;
    top:100px; left:0px;
}

该行显示低于光标的位置。

问题：如何让线条在光标所在的位置绘制？

这是我的代码。

CSS

canvas 
{
    position:absolute;
    top:100px; left:0px;
}

#writepad
{
    display:block;
    width:700px;
    height:500px;
}

JAVASCRIPT (Main.js)

    SCREEN_HEIGHT = $('#writepad').innerHeight();// SCREEN_HEIGHT = window.innerHeight,

init();

function init()
{
    var hash, palette, embed, localStorageImage;

    document.body.style.backgroundRepeat = 'no-repeat';
    document.body.style.backgroundPosition = 'center center';   

    container = document.createElement('div'); 
    document.body.appendChild(container);

    canvas = document.createElement("canvas");
    canvas.width = SCREEN_WIDTH;
    canvas.height = SCREEN_HEIGHT;
    canvas.style.cursor = 'crosshair';
    container.appendChild(canvas);

    context = canvas.getContext("2d");

    flattenCanvas = document.createElement("canvas");
    flattenCanvas.width = SCREEN_WIDTH;
    flattenCanvas.height = SCREEN_HEIGHT;   
}


// WINDOW

function onWindowMouseMove( event )
{
    mouseX = event.clientX;
    //console.log("mouseX=",mouseX);
    mouseY = event.clientY;
    //console.log("mouseY=",mouseY);
}

function onWindowResize()
{
    SCREEN_WIDTH = window.innerWidth;
    SCREEN_HEIGHT = window.innerHeight; 
    menu.container.style.left = ((SCREEN_WIDTH - menu.container.offsetWidth) / 2) + 'px';   
    about.container.style.left = ((SCREEN_WIDTH - about.container.offsetWidth) / 2) + 'px';
    about.container.style.top = ((SCREEN_HEIGHT - about.container.offsetHeight) / 2) + 'px';
}

function onWindowBlur( event )
{
    shiftKeyIsDown = false;
    altKeyIsDown = false;
}

// CANVAS

function onCanvasMouseDown( event )
{
    var data, position;
    clearTimeout(saveTimeOut);
    cleanPopUps();

    if (altKeyIsDown)
    {
        flatten();      
        data = flattenCanvas.getContext("2d").getImageData(0, 0, flattenCanvas.width, flattenCanvas.height).data;
        position = (event.clientX + (event.clientY * canvas.width)) * 4;
        console.log("position=",position);      
        foregroundColorSelector.setColor( [ data[position], data[position + 1], data[position + 2] ] );     
        return;
    }

    BRUSH_PRESSURE = wacom && wacom.isWacom ? wacom.pressure : 1;   
    brush.strokeStart( event.clientX, event.clientY );
    window.addEventListener('mousemove', onCanvasMouseMove, false);
    window.addEventListener('mouseup', onCanvasMouseUp, false);
}

function onCanvasMouseMove( event )
{
    BRUSH_PRESSURE = wacom && wacom.isWacom ? wacom.pressure : 1;   
    brush.stroke( event.clientX, event.clientY );
}

function onCanvasMouseUp()
{
    brush.strokeEnd();  
    window.removeEventListener('mousemove', onCanvasMouseMove, false);
    window.removeEventListener('mouseup', onCanvasMouseUp, false);
}

function onCanvasTouchStart( event )
{
    cleanPopUps();      
    if(event.touches.length == 1)   {
        event.preventDefault();     
        brush.strokeStart( event.touches[0].pageX, event.touches[0].pageY );        
        window.addEventListener('touchmove', onCanvasTouchMove, false);
        window.addEventListener('touchend', onCanvasTouchEnd, false);
    }
}

function onCanvasTouchMove( event )
{
    if(event.touches.length == 1)
    {
        event.preventDefault();
        brush.stroke( event.touches[0].pageX, event.touches[0].pageY );
    }
}

function onCanvasTouchEnd( event )
{
    if(event.touches.length == 0)
    {
        event.preventDefault();     
        brush.strokeEnd();
        window.removeEventListener('touchmove', onCanvasTouchMove, false);
        window.removeEventListener('touchend', onCanvasTouchEnd, false);
    }
}

function flatten()
{
    var context = flattenCanvas.getContext("2d");   
    context.fillStyle = 'rgb(' + BACKGROUND_COLOR[0] + ', ' + BACKGROUND_COLOR[1] + ', ' + BACKGROUND_COLOR[2] + ')';
    context.fillRect(0, 0, canvas.width, canvas.height);
    context.drawImage(canvas, 0, 0);
}
4

2 回答 2

1

你想要这样的东西？？？

<!doctype html>
<html>
    <head>
        <script type="text/javascript">
        window.onload=function() {
            var canvas=document.getElementById('mycanvas');
            var ctx=canvas.getContext('2d');            
                     canvas.addEventListener('mousemove',function onMouseover(e) {
                        var mx = e.clientX - 8;
                        var my = e.clientY - 8;                             
                        ctx.fillStyle = '#000'; 
                        ctx.font = 'bold 22px verdana';
                        ctx.fillText(".", mx, my,1000);                     
                    }, 0);                  
        };
        </script>
    </head>
    <body>
        <canvas id="mycanvas" height="400" width="800" style="border:1px solid #000000;">
    </body>
</html>
于 2012-08-02T07:43:23.523 回答
0

使用偏移属性

y = event.pageY - canvas.offsetTop;
x = event.pageX - canvas.offsetLeft;
于 2012-08-02T07:29:10.757 回答