Question

11我在这里使用sketch.js：http://intridea.github.io/sketch.js/和jquery 2.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我在this.el.width = this.canvas.width();的 116 行注释了sketch.js，但无济于事。

任何帮助表示赞赏！

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

编辑：无法弄清楚如何使用sketch.js，所以转而使用jqScribble（在评论中发布的链接），它可以作为内置函数执行此操作。

Answer 1

在库中找到这一行 - sketch.js并删除/注释掉它。

struct scull_pipe *dev;

dev = container_of(inode->i_cdev, struct scull_pipe, cdev);

祝你好运

Answer 2

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

var imageObj = new Image(); imageObj.onload = function() { context.drawImage(this, 0, 0,sigCanvas.width,sigCanvas.height); }; imageObj.src = imgurl;
编辑：我会在黑暗中拍摄，因为我不熟悉sketchjs

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

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

我注意到在一些sketchjs示例中，如果你想要一个背景，他们实际上为画布分配了一个背景样式。在您的示例中，您将背景直接绘制到画布上。之前可能有效，因为sketchjs知道在绘制时合并背景样式。但是，它不知道当你画出新鲜的背景图像时，应该使用它。

你能改变画布元素的背景样式，而不是直接在画布上画画吗？

画布在mousedown上清除，sketch.js＆amp; jquery 2.0.0

2 个答案: