Question

我想在使用jQuery的resizable（）函数调整大小时使用包含画布，视觉控制器的div。

我的意思是说'视觉控制器'这些8个黑色方块，当你点击一个允许你像这个例子一样调整图像的图像时出现：

an image with visual controllers

我编写了以下函数，在div周围绘制了8个方块。点击div时，它会给出目标视觉外观。再次单击div时，它将删除8平方并删除resizable（）函数。它可以正常工作但，当调整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

在这个例子中，我只是将高度和宽度设置为全局，因此它们总是被引用，但是我想你可以使用提供的演示来提供一种更好的方法来跟踪元素的原始高度和宽度。 / p>

另请注意，jQuery的width()和height()与在canvas元素上调用width和height不同。 jQuery的方法使用其样式属性重新调整元素的大小。

如何保存和删除画布状态？

1 个答案: