2

当使用 jQuery 的 resizable() 函数调整它的大小时，我想给一个包含画布的 div 和可视控制器。

我的意思是说“视觉控制器”这 8 个黑色方块，当您单击允许您调整图像大小的图像时出现，如下例所示：

带有视觉控制器的图像

我编写了以下函数，在 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

4

1 回答 1

3

您的问题是如何通过resize(). 画布的大小正在改变，但它不会改变坐标系的大小。550x350 的初始宽度和高度保持不变。

现场演示

我所做的只是将以下内容添加到您的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 重新调整画布元素的大小通常是个坏主意，因为您会得到意想不到的结果。

但是，以上将导致您必须重新绘制图形。所以另一种方法就是跟踪画布的原始宽度和高度，并像下面的小提琴一样使用这些值。

现场演示 2

在此示例中，我只是将高度和宽度设为全局，因此它们将始终被引用，但是我想您可以使用提供的演示来想出一种更好的方法来跟踪元素的原始高度和宽度。

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

于 2013-03-09T03:55:33.617 回答