画布在mousedown、sketch.js &jQuery2.0.0上被清除。

Question

11我在这里使用sketch.js：http://intridea.github.io/sketch.js/和jQuery2.0.0

在我的页面上，我有如下所示的图片列表：

<a href="http://url.to/image"><img src="http://url.to/image"><br><span class="background">click for background</span></a>

和一个canvas，设置如下：

<canvas id="simple_sketch" style="border: 2px solid black;"></canvas>

相关JavaScript

var winwidth = 800;
var winheight = 600;
$('#simple_sketch').attr('width', winwidth).attr('height', winheight);

$('#simple_sketch').sketch();
$('.background').on('click', function(event) {
    event.preventDefault();
    var imgurl = $(this).parent().attr('href');
    console.log('imgurl: ' + imgurl);
    var n = imgurl.split('/');
    var size = n.length;
    var file = '../webkort/' + n[size - 1];
    var sigCanvas = document.getElementById('simple_sketch');
    var context = sigCanvas.getContext('2d');
    var imageObj = new Image();
    imageObj.src = imgurl;
    imageObj.onload = function() {
        context.drawImage(this, 0, 0,sigCanvas.width,sigCanvas.height);
    };
    alert('background changed');
});

背景就像我想要的一样被改变，但是每当我点击canvas时，背景图像就会被清除。根据关于这个线程的建议：html5 canvas background image disappear on mousemove，我在116 of sketch.js上注释掉了this.el.width = this.canvas.width();，但没有效果。

任何帮助都很感激！

编辑: jsfiddle：http://jsfiddle.net/RXFX4/1/

编辑:无法想出如何用sketch.js来完成这个任务，所以转而使用了jqScribble (在评论中发布的链接)，它可以将其作为内置函数来实现。

Answer 1

在库- sketch.js上找到这一行，然后删除/注释掉它。

this.el.width = this.canvas.width(); 

祝好运

Answer 2

在onload事件之后，在图像源上分配url。如果图像已经加载，则事件可能是在您挂钩它之前触发的。这意味着您的drawImage永远不会被调用。

var imageObj = new Image();
imageObj.onload = function() {
    context.drawImage(this, 0, 0,sigCanvas.width,sigCanvas.height);
};
imageObj.src = imgurl;

编辑:我要在黑暗中拍照，因为我对素描不熟悉

我认为您的问题是，当单击“更改背景”链接时，您将完全重新呈现画布。请注意，如果您绘制，然后单击更改背景，您将失去您的绘图。

但是，请注意，一旦再次单击，背景将消失，您将再次获得原始绘图。这告诉我，草图正在跟踪它在内存中的画布上绘制的内容，然后将它放到目标上。因此，问题在于，当绘制内存中的画布时，它将目标画布的内容完全替换为自己的内容。

我注意到在一些草图的例子中，如果你想要一个背景，他们实际上给画布分配了一个背景样式。在您的示例中，您要将背景直接绘制到画布上。前面的可能有效，因为素描知道当它画的时候要结合背景风格。然而，它不知道当你画你的新背景图像时，它应该使用。

您能更改画布元素的背景样式，而不是直接在画布上绘图吗？