画布修复绘图点

时间:2016-01-16 22:56:29

标签: javascript canvas

我创建了一个绘图画布。在javascript中。 但是当我快速移动我的鼠标时,我没有一条完整的线条,而是一条带点的线。 我已经使用了弧线,我不知道有一个更好的选择画线

我该如何解决这个问题?

已经感谢了



<script type="application/javascript" src="jquery.js"></script>
<script>

    var canvas;
    var ctx;
    var StartDraw = false;
    var dikte = 7;

$(document).ready(DoInit());



    function DoInit()
    {
         canvas = document.getElementById("canvas");
         ctx = canvas.getContext('2d');

        $(".kleur").on('click',doKleur);
        $("canvas").on('mouseup',DoUp);
        $("canvas").on('mousedown',DoDown);
        $("canvas").on('mousemove',DoMove)
        $("#dikte").on('change',doDikte);
        $(".clear").on('click',clear);
    }



    function doDikte(){
        dikte  = this.value;
    }

    function clear(){

       ctx.clearRect(0,0,canvas.width,canvas.height);
    }



    function doKleur(){
        ctx.fillStyle = this.id;


    }

    function DoDown()
    {
        StartDraw = true;
    }
    function DoUp()
    {
        StartDraw = false;
    }

    function DoDot(x,y)
    {

            ctx.beginPath();
            ctx.arc(x, y, dikte, 0, Math.PI * 2, false);

            ctx.closePath();
            ctx.fill();

    }

    function DoMove(event)
    {

        if(StartDraw)
        {

            DoDot(event.offsetX, event.offsetY)
        }

    }




</script>
&#13;
<style>
    canvas
    {
        border: solid 5px red;
        border-radius: 15px;
    }
</style>
&#13;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<canvas id="canvas" width="1000" height="650"></canvas>
<input class="kleur" type="button" id="blue" value="blauw">
<input class="kleur" type="button" id="green" value="groen">
<input class="kleur" type="button" id="red" value="rood">
<input class="kleur" type="button" id="black" value="zwart">
<input class="kleur" type="button" id="orange" value="oranje">
<input type="button" class="clear" value="clear">
<input type="range" id="dikte" min="1" max="35" value="7">
</body>
</html>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:1)

您需要检查鼠标刚刚被点击,被保持,何时被释放或只是快速点击。您需要在拖动鼠标时绘制线段,或者只需快速单击即可绘制一个点。

我更喜欢将我的所有鼠标事件捆绑到一个函数中,然后创建一个抽象鼠标对象,然后我将其用于我的任何需求。

当我处理鼠标事件时,无论是移动还是点击,无论我做什么,都是保存按钮状态。这意味着下次调用鼠标事件时,通过检查最后一个和当前鼠标按钮状态,如果按钮刚刚被点击,正在按住,或者只是向上,我知道。你可能会说mousedownmouseup事件已经为你做了,是的,他们做了,你没有理由不使用它们。从长远来看,我发现它更容易,因为我可以操纵鼠标状态。

那么当鼠标第一次下降时,记录坐标,然后当鼠标移动时,从最后一个坐标到新坐标绘制一条线。当鼠标按钮上升时,快速检查一下是否只是绘制和绘制它的点,否则什么都不做。

这是一个例子。鼠标代码位于底部,mouse.buttonRaw是当前鼠标按钮状态的位字段,其中第一位是左边,第二位是中间,第三位是右边。

&#13;
&#13;
var mouse;
document.body.innerHTML = "Use mouse to draw on the this snippet.";
var demo = function(){

    var canvas = (function(){
        var canvas = document.getElementById("canv");
        if(canvas !== null){
            document.body.removeChild(canvas);
        }
        // creates a blank image with 2d context
        canvas = document.createElement("canvas"); 
        canvas.id = "canv";    
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight; 
        canvas.style.position = "absolute";
        canvas.style.top = "0px";
        canvas.style.left = "0px";
        canvas.style.zIndex = 1000;
        canvas.ctx = canvas.getContext("2d"); 
        document.body.appendChild(canvas);
        return canvas;
    })();
    var ctx = canvas.ctx;
    

    if(mouse !== undefined){  // if the mouse exists 
        mouse.removeMouse(); // remove previous events
    }
    var canvasMouseCallBack = undefined;  // if needed
    // my mouse handler has more functionality than needed but to lazy to clean it ATM
    mouse = (function(){
        var mouse = {
            x : 0, 
            y : 0,
            w : 0, 
            alt : false, 
            shift : false, 
            ctrl : false,
            interfaceId : 0, 
            buttonLastRaw : 0,  
            buttonRaw : 0,
            over : false,  // mouse is over the element
            bm : [1, 2, 4, 6, 5, 3], // masks for setting and clearing button raw bits;
            getInterfaceId : function () { return this.interfaceId++; }, // For UI functions
            startMouse:undefined,
            mouseEvents : "mousemove,mousedown,mouseup,mouseout,mouseover,mousewheel,DOMMouseScroll".split(",")
        };
        function mouseMove(e) {
            var t = e.type, m = mouse;
            m.x = e.offsetX; 
            m.y = e.offsetY;
            if (m.x === undefined) { m.x = e.clientX; m.y = e.clientY; }

            m.alt = e.altKey;
            m.shift = e.shiftKey;
            m.ctrl = e.ctrlKey;
            if (t === "mousedown") { m.buttonRaw |= m.bm[e.which-1];
            } else if (t === "mouseup") { m.buttonRaw &= m.bm[e.which + 2];
            } else if (t === "mouseout") { m.buttonRaw = 0; m.over = false;
            } else if (t === "mouseover") { m.over = true;
            } else if (t === "mousewheel") { m.w = e.wheelDelta;
            } else if (t === "DOMMouseScroll") { m.w = -e.detail;}
            // call mouse callback if set
            if (canvasMouseCallBack) { canvasMouseCallBack(mouse); }
            e.preventDefault();
        }
        // function to add events to element
        function startMouse(element){
            if(element === undefined){
                element = document;
            }
            mouse.element = element;
            mouse.mouseEvents.forEach(
                function(n){
                    element.addEventListener(n, mouseMove);
                }
            );
            element.addEventListener("contextmenu", function (e) {e.preventDefault();}, false);
        }
        // function to remove events
        mouse.removeMouse = function(){
            if(mouse.element !== undefined){
                mouse.mouseEvents.forEach(
                    function(n){
                        mouse.element.removeEventListener(n, mouseMove);
                    }
                );
                canvasMouseCallBack = undefined;
            }
        }
        mouse.mouseStart = startMouse;
        return mouse;
    })();
    // if there is a canvas add the mouse event else add to document
    if(typeof canvas !== "undefined"){
        mouse.mouseStart(canvas);
    }else{
        mouse.mouseStart();
    }


    // for the previouse mouse state
    var lastMouseButton = 0;
    var x,y,xx,yy; //for saving line segments drawn
    // set up drawing
    ctx.fillStyle = "red";
    ctx.strokeStyle = "red";
    ctx.lineWidth = 10;
    ctx.lineJoin = "round";
    ctx.lineCap = "round";
    // set the mouse callback function. It is called for every mouse event
    canvasMouseCallBack = function(mouse){
        // is the first (left) button down and the last button state up?
        if((mouse.buttonRaw & 1) === 1 && (lastMouseButton & 1) === 0){
            x = mouse.x;  // save the mouse coordinates
            y = mouse.y;
        }else
        // is both the mouse button down and the last one down 
        if((mouse.buttonRaw & 1) === 1 && (lastMouseButton & 1) === 1){
            xx = x;  // yes move the last coordinate to the 
            yy = y;  // start of the line segment
            x = mouse.x;  // get the mouse coords for the end of the line seg
            y = mouse.y;
            ctx.beginPath();  // draw the line segment
            ctx.moveTo(x,y);
            ctx.lineTo(xx,yy);
            ctx.stroke();
        }else
        // has the mouse just been released
        if( (mouse.buttonRaw  & 1) === 0 && (lastMouseButton & 1) === 1){
            if(xx === undefined){  // if xx is undefined then no line segment 
                                   // has been drawn so need to ad just a point
                ctx.beginPath();  // draw a point at the last mouse point
                ctx.arc(x,y,5,0,Math.PI*2);
                ctx.fill();
            }
            xx = undefined;  // clear the line segment start
            
        }
        // save the last mouse start
        lastMouseButton = mouse.buttonRaw;
    }
}
// resize demo to fit window if needed
window.addEventListener("resize",demo);
// start the demo
demo();
&#13;
&#13;
&#13;

您可能也对这个处理绘图的答案感兴趣,但演示如何平滑正在绘制的线,因为鼠标输入可能非常脏。 Smooth a line