可调整大小的画布 - 问题 [英] Resizable canvas - Problems
问题描述
我已经整理了一些JavaScript来制作方形可调整大小的画布： -
http://www.aarongray.org/Test/JavaScript/resizable.html
我遇到的问题： -
a）我似乎无法将它放在中心位置
b）它似乎不是完全正方形在我的任何一台机器上。
非常感谢提前，
Aaron
Hi,
I have put together a bit of JavaScript to make a square resizable canvas :-
http://www.aarongray.org/Test/JavaScript/resizable.html
Problems I have :-
a) I cannot seem to center it horrizontally
b) It does not appear to be totaly square on either of my machines.
Many thanks in advance,
Aaron
推荐答案
Aaron Grayaécrit：
Aaron Gray a écrit :
我放在一起制作方形可调整大小的画布的一些JavaScript： -
http://www.aarongray.org/Test/JavaScript/resizable.html
我遇到的问题： -
a）我似乎无法进入中心用它来代价
Hi,
I have put together a bit of JavaScript to make a square resizable canvas :-
http://www.aarongray.org/Test/JavaScript/resizable.html
Problems I have :-
a) I cannot seem to center it horrizontally
与IE：
background.style.textAlign =''center'';
与他人一起：
canvas.style.margin =''auto;
with IE :
background.style.textAlign = ''center'';
with others :
canvas.style.margin = ''auto;
b）在我的任何一个上看起来都不是完全正方形机器。
b) It does not appear to be totaly square on either of my machines.
在''画布'中没有平方的背景图片，我不知道你怎么能
看到它。 />
< div id =" background"
style =" width：100％;身高：100％; position：relative;">
< div id =" canvas"
style =" border：solid 1px; position：absolute; top：50％ ;左：50％;">
< / div>
< / div>
< script type =" ; text / javascript">
document.body.margin ='''5px 5px 5px 5px'';
var background = document.getElementById（" ; background"）;
var canvas = document.getElementById（" canvas"）。style;
function sizer（）{
var size = Math.min（background.offsetWidth，background.offsetH 8）;
canvas.marginTop ='' - ''+ size / 2 +''px'';
canvas.marginLeft ='' - ''+ size / 2 +''px'';
canvas.height = canvas.width = size +''px''; < br $>
}
sizer（）;
window.onresize = function（）{sizer（）;分级机（）; };
< / script>
-
Stephane Moriaux et son（moins）vieuxMacdéjàdépassé
Stephane Moriaux和他的（旧）Mac已经过时
without a squared background image in ''canvas'', I don''t know how you can
see that.
<div id="background"
style="width: 100%; height: 100%; position: relative;">
<div id="canvas"
style="border:solid 1px;position:absolute;top:50%;left:50%;">
</div>
</div>
<script type="text/javascript">
document.body.margin = ''5px 5px 5px 5px'';
var background = document.getElementById("background");
var canvas = document.getElementById("canvas").style;
function sizer() {
var size = Math.min(background.offsetWidth,background.offsetH eight);
canvas.marginTop = ''-''+size/2+''px'';
canvas.marginLeft = ''-''+size/2+''px'';
canvas.height = canvas.width = size+''px'';
}
sizer();
window.onresize = function() { sizer(); sizer(); };
</script>
--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
Stephane Moriaux and his (less) old Mac already out of date
canvas.marginLeft ='' - ''+ size / 2 +'' px'';
''。style.marginLeft''而不是''style.left''就行了。
新版本： -
http：// www .aarongray.org / Test / JavaScript / resizable.html
虽然看起来不是正方形:(
谢谢，
Aaron
canvas.marginLeft = ''-''+size/2+''px'';
''.style.marginLeft'' rather than ''style.left'' did the trick.
New version :-
http://www.aarongray.org/Test/JavaScript/resizable.html
Still does not look square though :(
Thanks,
Aaron
Aaron Grayaécrit：
Aaron Gray a écrit :
> ;
仍然看起来不是正方形:(
>
Still does not look square though :(
Hu？
h ttp：//stephane.moriaux.perso.wanado...resizable.html
-
Stephane Moriaux et son（moins）vieuxMacdéjàdépassé
Hu ?
http://stephane.moriaux.perso.wanado...resizable.html
--
Stephane Moriaux et son (moins) vieux Mac déjà dépassé
这篇关于可调整大小的画布 - 问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
