HTML5 Canvas問題

Question

有沒有一種方法可以阻止用戶向下拖動鼠標，使他們只能單擊而不是單擊並拖動。 我希望htem只能在畫布上繪制點或我定義的類似於圖章工具的任何圖案。

function Sketcher( canvasID, brushImage ) {
this.renderFunction = (brushImage == null || brushImage == undefined) ? this.updateCanvasByLine : this.updateCanvasByBrush;
this.brush = brushImage;
this.touchSupported = Modernizr.touch;
this.canvasID = canvasID;
this.canvas = $("#"+canvasID);
this.context = this.canvas.get(0).getContext("2d"); 
this.context.strokeStyle = "#000000";
this.context.lineWidth = 3;
this.lastMousePoint = {x:0, y:0};

if (this.touchSupported) {
    this.mouseDownEvent = "touchstart";
    this.mouseMoveEvent = "touchmove";
    this.mouseUpEvent = "touchend";
}
else {
    this.mouseDownEvent = "mousedown";
    this.mouseMoveEvent = "mousemove";
    this.mouseUpEvent = "mouseup";
}

this.canvas.bind( this.mouseDownEvent, this.onCanvasMouseDown() );
 }

 Sketcher.prototype.onCanvasMouseDown = function () {
var self = this;
return function(event) {
    self.mouseMoveHandler = self.onCanvasMouseMove()
    self.mouseUpHandler = self.onCanvasMouseUp()

    $(document).bind( self.mouseMoveEvent, self.mouseMoveHandler );
    $(document).bind( self.mouseUpEvent, self.mouseUpHandler );

    self.updateMousePosition( event );
    self.renderFunction( event );
}
 }

  Sketcher.prototype.onCanvasMouseMove = function () {
var self = this;
return function(event) {

    self.renderFunction( event );
    event.preventDefault();
    return false;
}
}

Sketcher.prototype.onCanvasMouseUp = function (event) {
var self = this;
return function(event) {

    $(document).unbind( self.mouseMoveEvent, self.mouseMoveHandler );
    $(document).unbind( self.mouseUpEvent, self.mouseUpHandler );

    self.mouseMoveHandler = null;
    self.mouseUpHandler = null;
}
}

Sketcher.prototype.updateMousePosition = function (event) {
var target;
if (this.touchSupported) {
    target = event.originalEvent.touches[0]
}
else {
    target = event;
}

var offset = this.canvas.offset();
this.lastMousePoint.x = target.pageX - offset.left;
this.lastMousePoint.y = target.pageY - offset.top;

}

Sketcher.prototype.updateCanvasByLine = function (event) {

this.context.beginPath();
this.context.moveTo( this.lastMousePoint.x, this.lastMousePoint.y );
this.updateMousePosition( event );
this.context.lineTo( this.lastMousePoint.x, this.lastMousePoint.y );
this.context.stroke();
}

 Sketcher.prototype.updateCanvasByBrush = function (event) {
var halfBrushW = this.brush.width/2;
var halfBrushH = this.brush.height/2;

var start = { x:this.lastMousePoint.x, y: this.lastMousePoint.y };
this.updateMousePosition( event );
var end = { x:this.lastMousePoint.x, y: this.lastMousePoint.y };

var distance = parseInt( Trig.distanceBetween2Points( start, end ) );
var angle = Trig.angleBetween2Points( start, end );

var x,y;

for ( var z=0; (z<=distance || z==0); z++ )
{
    x = start.x + (Math.sin(angle) * z) - halfBrushW;
    y = start.y + (Math.cos(angle) * z) - halfBrushH;
    //console.log( x, y, angle, z );
    this.context.drawImage(this.brush, x, y);
}
}

 Sketcher.prototype.toString = function () {

var dataString = this.canvas.get(0).toDataURL("image/png");
var index = dataString.indexOf( "," )+1;
dataString = dataString.substring( index );

return dataString;
}

Sketcher.prototype.toDataURL = function () {

var dataString = this.canvas.get(0).toDataURL("image/png");
return dataString;
}

 Sketcher.prototype.clear = function () {

var c = this.canvas[0];
this.context.clearRect( 0, 0, c.width, c.height );
}

Answer 1

您可以通過不初始化它們或使用標志來表明您處於標記模式而忽略它們，而只需忽略mousemove和mouseup事件處理程序。

所有你需要的是：

canvas.onmousedown = function(e) {
    var pos = getMousePos(e);
    render(pos.x, pos.y);
}

就是這樣，並且它對於觸摸事件的工作方式也類似。

要使用標志（我不建議您一直都添加和刪除處理程序）：

var isStampMode = true;

canvas.onmousemove = function(e) {
    if (isStampMode) return;

    ...
}

和鼠標上移相似（但並非完全必要，除非它取決於您在鼠標下移中所做的操作）。

這里的例子

希望這可以幫助！