如何保存并移除画布状态？

Question

我想给出一个包含canvas，可视控制器的div，当用jQuery的resizable（）函数调整大小时。

我说“视觉控制器”当你点击一个形象，让你来调整这样的例子在图像上出现这8个黑色方块的意思是：

我写了下面的功能围绕div绘制8个方格。点击div时，它会给出目标视觉外观。再次点击div时，它将删除8平方，并删除可调整大小的（）函数。它工作正常但当调整div并再次点击它删除8个方块它不会删除它们。

我需要在应用图纸之前保存画布状态，然后再次单击画布时将其恢复。

$(document).on("click", "canvas", function(eg) { 
    var thisCanvas = $(this).attr("id"); 
    var theCanvas = document.getElementById(thisCanvas); 
    var ctx = theCanvas.getContext("2d"); 
    canvasSelected(thisCanvas, ctx); 
}); 

当触发以下功能画布的用户点击：

function canvasSelected(theCanvas, ctx){ 
    var ctxWidth = $("#"+theCanvas).width(); 
    var ctxHeight = $("#"+theCanvas).height(); 
    if($("#"+theCanvas).hasClass("bordering")){ 
     ctx.restore(); 
     $("#"+theCanvas).addClass("defaultBorder"); 
     $("#"+theCanvas).removeClass("bordering"); 
     ctx.beginPath(); 
     ctx.clearRect(0,0,6,6); 
     ctx.clearRect(ctxWidth- 6,0,6,6); 
     ctx.clearRect(ctxWidth/2,0,6,6); 
     ctx.clearRect(0,ctxHeight- 6,6,6); 
     ctx.clearRect(ctxWidth- 6,ctxHeight- 6,6,6); 
     ctx.clearRect(ctxWidth/2,ctxHeight- 6,6,6); 
     ctx.clearRect(0,ctxHeight/2,6,6); 
     ctx.clearRect(ctxWidth- 6,ctxHeight/2,6,6); 
     $("#"+theCanvas).resizable("option", "disabled", true); 
    }else{ 
     ctx.save(); 
     $("#"+theCanvas).removeClass("defaultBorder"); 
     $("#"+theCanvas).addClass("bordering"); 

     ctx.beginPath(); 
     ctx.fillStyle = "black"; 
     ctx.fillRect(0,0,6,6); 
     ctx.fill(); 
     ctx.fillRect(ctxWidth- 6,0,6,6); 
     ctx.fill(); 
     ctx.fillRect(ctxWidth/2,0,6,6); 
     ctx.fill(); 
     // bottom rects.. 
     ctx.fillRect(0,ctxHeight- 6,6,6); 
     ctx.fill(); 
     ctx.fillRect(ctxWidth- 6,ctxHeight- 6,6,6); 
     ctx.fill(); 
     ctx.fillRect(ctxWidth/2,ctxHeight- 6,6,6); 
     ctx.fill(); 
     // middle rects 
     ctx.fillRect(0,ctxHeight/2,6,6); 
     ctx.fill(); 
     ctx.fillRect(ctxWidth- 6,ctxHeight/2,6,6); 
     ctx.fill(); 
     $("#"+theCanvas).resizable(); 
     $("#"+theCanvas).resizable("option", "disabled", false); 
    } 
} 

这里是jsfiddle

Answer 1

你的问题是如何在画布正在通过resize()重新调整大小。尺寸正在根据画布的大小而改变，但不会改变坐标系的大小。您的初始宽度和550x350的高度保持不变。

Live Demo

我所做的只是以下内容添加到您的canvasSelected事件，

// get the canvas element 
var canvas = document.getElementById(theCanvas); 
// change the pixel dimensions to match the css width and height. 
canvas.width = ctxWidth; 
canvas.height = ctxHeight; 

这保证了像素尺寸也将被更新。请记住，使用CSS重新调整canvas元素的大小通常是一个坏主意，因为您会得到意想不到的结果。

但是，以上将导致您不得不重绘您的图形。因此，另一种方法是跟踪画布的原始宽度和高度，并使用像下面的小提琴那样的值。

Live Demo 2

在这个例子中我只是做了高度和宽度全球化，所以他们通常会被引用，但我想你可以使用所提供的演示拿出保持原有的轨道的更好的方法元素的高度和宽度。

还要注意，jQuery的width()和height()是不一样的canvas元素上调用width和height。 jQuery的方法使用其样式属性重新调整元素的大小。