0

sketch.js11我从这里使用：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>

和 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 背景图像在 mousemove 上消失我在第116this.el.width = this.canvas.width();行注释掉了，但无济于事。sketch.js

任何帮助表示赞赏！

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

编辑：无法弄清楚如何使用sketch.js 做到这一点，所以改为使用jqScribble（评论中发布的链接），它能够作为内置函数执行此操作。

4

2 回答 2

1

在库 - sketch.js 上找到这一行并将其删除/注释掉。

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

祝你好运

于 2015-09-17T09:09:58.640 回答
0

在 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 知道在绘制时要合并背景样式。但是，它不知道当您绘制新的背景图像时，它应该使用它。

您可以只更改画布元素上的背景样式，而不是直接在画布上绘制吗？

于 2013-08-21T13:03:28.940 回答