如何使画布响应 [英] How to make canvas responsive
问题描述
我使用引导程序.我希望用户能够选择画布大小，同时使设计屏幕在div内保持响应.
<div class="row">
<div class="col-xs-2 col-sm-2" id="border">content left</div>
<div class="col-xs-6 col-sm-6" id="border">
Width <input type="number" class="form-control"><br>
Height <input type="number" class="form-control"><br>
canvas
<canvas id="canvas" width="500" height="300">
</canvas>
</div>
<div class="col-xs-2 col-sm-2" id="border">content right</div>
如何将画布的大小限制为div的大小?
我不知道是否有必要使用JavaScript.
修改
应考虑到用户输入的宽度和高度值，并且画布的尺寸必须与div成比例
https://jsfiddle.net/1a11p3ng/2/
更改宽度并不难.只需从标记中删除width属性，然后在#canvas
width: 100%;
#canvas{
border: solid 1px blue;
width: 100%;
}
更改高度有点困难:您需要使用javascript.我使用jQuery是因为我比较适应.
您需要从canvas标记中删除height属性并添加以下脚本:
<script>
function resize(){
$("#canvas").outerHeight($(window).height()-$("#canvas").offset().top- Math.abs($("#canvas").outerHeight(true) - $("#canvas").outerHeight()));
}
$(document).ready(function(){
resize();
$(window).on("resize", function(){
resize();
});
});
</script>
您可以看到这个小提琴: https://jsfiddle.net/1a11p3ng/3/
回答第二个问题.您需要javascript
0)首先，我将#border id更改为一个类，因为id必须对于html页面中的元素是唯一的(您不能有2个具有相同id的标签)
.border{
border: solid 1px black;
}
#canvas{
border: solid 1px blue;
width: 100%;
}
1)更改了HTML，在需要的地方添加了id，两个输入和一个用于设置值的按钮
<div class="row">
<div class="col-xs-2 col-sm-2 border">content left</div>
<div class="col-xs-6 col-sm-6 border" id="main-content">
<div class="row">
<div class="col-xs-6">
Width <input id="w-input" type="number" class="form-control">
</div>
<div class="col-xs-6">
Height <input id="h-input" type="number" class="form-control">
</div>
<div class="col-xs-12 text-right" style="padding: 3px;">
<button id="set-size" class="btn btn-primary">Set</button>
</div>
</div>
canvas
<canvas id="canvas"></canvas>
</div>
<div class="col-xs-2 col-sm-2 border">content right</div>
</div>
2)设置画布的高度和宽度，以使其适合容器内部
$("#canvas").outerHeight($(window).height()-$("#canvas").offset().top-Math.abs( $("#canvas").outerHeight(true) - $("#canvas").outerHeight()));
3)设置宽度和高度形式的值
$("#h-input").val($("#canvas").outerHeight());
$("#w-input").val($("#canvas").outerWidth());
4)最后，每当您单击按钮时，都将画布的宽度和高度设置为设置的值.如果width值大于容器的宽度，则会将画布的大小改为容器的宽度(否则会破坏您的布局)
$("#set-size").click(function(){
$("#canvas").outerHeight($("#h-input").val());
$("#canvas").outerWidth(Math.min($("#w-input").val(), $("#main-content").width()));
});
在此处查看完整示例 https://jsfiddle.net/1a11p3ng/7/
更新2:
要完全控制宽度，可以使用以下方法:
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 border">content left</div>
<div class="col-xs-8 border" id="main-content">
<div class="row">
<div class="col-xs-6">
Width <input id="w-input" type="number" class="form-control">
</div>
<div class="col-xs-6">
Height <input id="h-input" type="number" class="form-control">
</div>
<div class="col-xs-12 text-right" style="padding: 3px;">
<button id="set-size" class="btn btn-primary">Set</button>
</div>
</div>
canvas
<canvas id="canvas">
</canvas>
</div>
<div class="col-xs-2 border">content right</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#canvas").outerHeight($(window).height()-$("#canvas").offset().top-Math.abs( $("#canvas").outerHeight(true) - $("#canvas").outerHeight()));
$("#h-input").val($("#canvas").outerHeight());
$("#w-input").val($("#canvas").outerWidth());
$("#set-size").click(function(){
$("#canvas").outerHeight($("#h-input").val());
$("#main-content").width($("#w-input").val());
$("#canvas").outerWidth($("#main-content").width());
});
});
</script>
https://jsfiddle.net/1a11p3ng/8/
如果宽度太大，则内容左"和内容右"列将移到上方，并且会偏爱中央div，但这在使用引导程序时无济于事.但是，这并不是响应式的含义.真正具有响应能力的网站将根据用户屏幕调整其大小，以保持您的预期布局，而无需任何外部输入，让用户设置任何可能破坏布局的大小并不意味着创建响应站点.
I use bootstrap. I want the user to be able to choose the canvas size while keeping the design screen responsive within the div.
<div class="row">
<div class="col-xs-2 col-sm-2" id="border">content left</div>
<div class="col-xs-6 col-sm-6" id="border">
Width <input type="number" class="form-control"><br>
Height <input type="number" class="form-control"><br>
canvas
<canvas id="canvas" width="500" height="300">
</canvas>
</div>
<div class="col-xs-2 col-sm-2" id="border">content right</div>
How can I limit the size of the canvas to the size of the div?
I do not know if it will be necessary to use JavaScript.
Edit
It should be taken into account that the width and height values are entered by the user and the canvas must be in div proportional in size
https://jsfiddle.net/1a11p3ng/2/
To change width is not that hard. Just remove the width attribute from the tag and add width: 100%; in the css for #canvas
#canvas{
border: solid 1px blue;
width: 100%;
}
Changing height is a bit harder: you need javascript. I have used jQuery because i'm more comfortable with.
you need to remove the height attribute from the canvas tag and add this script:
<script>
function resize(){
$("#canvas").outerHeight($(window).height()-$("#canvas").offset().top- Math.abs($("#canvas").outerHeight(true) - $("#canvas").outerHeight()));
}
$(document).ready(function(){
resize();
$(window).on("resize", function(){
resize();
});
});
</script>
You can see this fiddle: https://jsfiddle.net/1a11p3ng/3/
EDIT:
To answer your second question. You need javascript
0) First of all i changed your #border id into a class since ids must be unique for an element inside an html page (you can't have 2 tags with the same id)
.border{
border: solid 1px black;
}
#canvas{
border: solid 1px blue;
width: 100%;
}
1) Changed your HTML to add ids where needed, two inputs and a button to set the values
<div class="row">
<div class="col-xs-2 col-sm-2 border">content left</div>
<div class="col-xs-6 col-sm-6 border" id="main-content">
<div class="row">
<div class="col-xs-6">
Width <input id="w-input" type="number" class="form-control">
</div>
<div class="col-xs-6">
Height <input id="h-input" type="number" class="form-control">
</div>
<div class="col-xs-12 text-right" style="padding: 3px;">
<button id="set-size" class="btn btn-primary">Set</button>
</div>
</div>
canvas
<canvas id="canvas"></canvas>
</div>
<div class="col-xs-2 col-sm-2 border">content right</div>
</div>
2) Set the canvas height and width so that it fits inside the container
$("#canvas").outerHeight($(window).height()-$("#canvas").offset().top-Math.abs( $("#canvas").outerHeight(true) - $("#canvas").outerHeight()));
3) Set the values of the width and height forms
$("#h-input").val($("#canvas").outerHeight());
$("#w-input").val($("#canvas").outerWidth());
4) Finally, whenever you click on the button you set the canvas width and height to the values set. If the width value is bigger than the container's width then it will resize the canvas to the container's width instead (otherwise it will break your layout)
$("#set-size").click(function(){
$("#canvas").outerHeight($("#h-input").val());
$("#canvas").outerWidth(Math.min($("#w-input").val(), $("#main-content").width()));
});
See a full example here https://jsfiddle.net/1a11p3ng/7/
UPDATE 2:
To have full control over the width you can use this:
<div class="container-fluid">
<div class="row">
<div class="col-xs-2 border">content left</div>
<div class="col-xs-8 border" id="main-content">
<div class="row">
<div class="col-xs-6">
Width <input id="w-input" type="number" class="form-control">
</div>
<div class="col-xs-6">
Height <input id="h-input" type="number" class="form-control">
</div>
<div class="col-xs-12 text-right" style="padding: 3px;">
<button id="set-size" class="btn btn-primary">Set</button>
</div>
</div>
canvas
<canvas id="canvas">
</canvas>
</div>
<div class="col-xs-2 border">content right</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#canvas").outerHeight($(window).height()-$("#canvas").offset().top-Math.abs( $("#canvas").outerHeight(true) - $("#canvas").outerHeight()));
$("#h-input").val($("#canvas").outerHeight());
$("#w-input").val($("#canvas").outerWidth());
$("#set-size").click(function(){
$("#canvas").outerHeight($("#h-input").val());
$("#main-content").width($("#w-input").val());
$("#canvas").outerWidth($("#main-content").width());
});
});
</script>
https://jsfiddle.net/1a11p3ng/8/
the content left and content right columns will move above and belove the central div if the width is too high, but this can't be helped if you are using bootstrap. This is not, however, what responsive means. a truly responsive site will adapt its size to the user screen to keep the layout as you have intended without any external input, letting the user set any size which may break your layout does not mean making a responsive site.
这篇关于如何使画布响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
