可调整大小的画布(jquery UI)

画布有两种调整大小的行为:

• 调整内容拉伸位置的大小以适应画布的新尺寸
• 在画布增长或收缩时内容保持静态的位置调整大小

这是一个演示“调整大小”两种类型的页面: http://xavi.co/static/so-resizable-canvas.html

如果要第一种调整大小(拉伸内容),请将画布放入容器中。 div 并设置 width 和 height 使用CSS将画布的比例提高到100%。下面是该代码的外观:

/* The CSS */
#stretch {
    height: 100px;
    width: 200px;
}

#stretch canvas {
    width: 100%;
    height: 100%;
}

<!-- The markup -->
<div id="stretch"><canvas></canvas></div>

// The JavaScript
$("#stretch").resizable();

第二种类型的调整大小(静态内容)是一个两步过程。首先你必须调整 宽度 和 高度 画布元素的属性。不幸的是,这样做会清除画布,因此必须重新绘制画布的所有内容。下面是一些代码:

/* The CSS */
#resize {
    height: 100px;
    width: 200px;
}

<!-- The markup -->
<div id="resize"><canvas></canvas></div>

// The JavaScript
$("#resize").resizable({ stop: function(event, ui) {
    $("canvas", this).each(function() { 
        $(this).attr({ width: ui.size.width, height: ui.size.height });

        // Adjusting the width or height attribute clears the canvas of
        // its contents, so you are forced to redraw.
        reDraw(this);
    });
} });

当前,当用户停止调整小部件的大小时,上面的代码会重新绘制画布的内容。可以重新绘制画布 resize 但是,调整大小的事件经常发生,并且重新绘制是昂贵的操作——小心地接近。

在画布坐标系统上有一点奇怪的地方,关于使用这个:

(以上示例)

必须使用这些CSS规则,因为不能在画布的宽度/高度属性中指定%。但是当你试图用这些规则在上面绘制对象时,你会发现你会得到意想不到的结果——绘制的对象看起来被压扁了。这是上面的CSS,带有画布边框…

画布的大小是正确的,边框规则是正确实现的。在其他地方的代码中添加的蓝色矩形,应该用20px的填充填充填充画布,但这并没有发生:

要解决此问题,请确保还为canvas元素指定宽度和高度(在HTML或带setattribute的javascript中):。

canvas.setattribute('width','200');
canvas.setattribute('高度','100');
< /代码> 

或

<canvas width=200 height=100>/canvas>
< /代码> 

现在,当我刷新页面时,我得到了我期望的:



这个“双重检查”将确保画布是使用正确的坐标系绘制的,并且仍然允许通过CSS规则调整其大小。如果这是一个错误,我相信它将在适当的时候被修复。


这只是提供一个修复方法,但您可以阅读更多内容
s使用此:


#stretch canvas {
  width: 100%;
  height: 100%;
}


(以上示例)

必须使用这些CSS规则,因为不能在画布的宽度/高度属性中指定%。但是当你试图用这些规则在上面绘制对象时,你会发现你会得到意想不到的结果——绘制的对象看起来被压扁了。这是上面的CSS,带有画布边框…

    /* The CSS */
    #stretch {
        width: 200px;
        height: 100px;          
    }
    #stretch canvas {
        border:1px solid red;
        width: 100%;
        height: 100%;
    }


画布的大小是正确的,边框规则是正确实现的。在其他地方的代码中添加的蓝色矩形,应该用20px的填充填充填充画布,但这并没有发生:



要解决此问题,请确保也指定画布元素的宽度和高度(在HTML或带setattribute的javascript中):

canvas.setAttribute('width', '200');
canvas.setAttribute('height', '100');


或

<canvas width=200 height=100></canvas>


现在,当我刷新页面时,我得到了我所期望的:



这个“双重检查”将确保画布是使用正确的坐标系绘制的,并且仍然允许通过CSS规则调整其大小。如果这是一个错误,我相信它会在适当的时候被修复。

这只是提供一个修复方法,但您可以从中了解更多信息。here

为什么不在canvas元素之前应用一个div,并调整该元素的大小,当它停止时,在canvas中应用宽度和高度,然后重新绘制canvas。