4

我正在开发一个插件，你可以在我的小提琴中看到，问题是当我们在 Firefox 中绘图时它会变慢但在谷歌 Chrome 中很好。有什么帮助吗？？

顺便说一句，使用两个画布，一个用于绘图区域以便稍后将其保存为图像。检查小提琴

context.beginPath();
newcontext.beginPath();
// If dragging then draw a line between the two points
if (clickDrag[i] && i) {
    context.moveTo(clickX[i - 1], clickY[i - 1]);
    newcontext.moveTo(clickX[i - 1], clickY[i - 1]);
} else {
    // The x position is moved over one pixel so a circle even if not dragging
    context.moveTo(clickX[i] - 1, clickY[i]);
    newcontext.moveTo(clickX[i] - 1, clickY[i]);
}
context.lineTo(clickX[i], clickY[i]);
newcontext.lineTo(clickX[i], clickY[i]);
// Set the drawing color
if (clickTool[i] === "eraser") {
    //context.globalCompositeOperation = "destination-out"; // To erase instead of draw over with white
    context.strokeStyle = 'white';
    newcontext.strokeStyle = 'white';
} else {
    //context.globalCompositeOperation = "source-over"; // To erase instead of draw over with white
    context.strokeStyle = clickColor[i];
    newcontext.strokeStyle = clickColor[i];
}

context.lineCap = "round";
context.lineJoin = "round";
context.lineWidth = radius;
context.stroke();

http://jsfiddle.net/aV6bg/

4

2 回答 2

1

我认为您正在为可以以更简单的方式获得的东西进行大量计算和绘图。

换句话说，不是 Firefox 很慢……只是 Chrome 速度非常快 :-D

例如，另一种方法是让浏览器在画布顶部显示部分透明的图像，然后直接在画布上执行绘图操作，无需特殊遮罩。

这可以允许通过蒙版查看绘画，而无需进行复杂的剪裁操作。

Those operations could be done for real on a single canvas only when the user asks to export the picture as a png if this is something you need to provide.

To see an example of this approach in action check this out

The source code is in lisp but it shouldn't be too hard to read (the full program is only 116 lines)

于 2013-08-16T10:32:04.213 回答
1

Finally got rid of my second canvas which was for saving image, used below code to get drawing area rectangle so no noeed for second canvas anymore.

Now speed is better than before in Firefox 22(ubuntu).

function savePhoto() {
var canvas = document.getElementById("canvas");
var tempcanvas = document.createElement("canvas");
var tempctx = tempcanvas.getContext("2d");
tempcanvas.width = 820;
tempcanvas.height = 675;
tempctx.drawImage(canvas, 90, 131,790, 680,0, 0,  820, 680);
var dataUrl = tempcanvas.toDataURL();
alert(dataUrl);
}

//Ajax Request to save image to folder For drawings page
var request = $.ajax({
url: "<?php echo get_bloginfo('url').'/canvas?wcpdx=ajax-handler'; ?>",
type: "POST",
data: { 'rawimage': dataUrl }
});
request.done(function(msg) {
alert( 'success = '+msg );
});
request.fail(function(jqXHR, textStatus) {
alert( "Request failed: " + textStatus );
});

works great :)

于 2013-08-19T09:23:52.037 回答