Question

在CSS中，我们有一个box model来定义边框，边距，填充和填充如何影响矩形的总宽度和高度。我正在将我的一些HTML / CSS设计移植到Flash中，并且无法弄清楚Flash的盒子模型是什么。在Flash中，我创建了一个带渐变填充和非缩放1像素笔划的矩形。我正在努力获得像素完美的定位和尺寸，但这种体验一直无法预测。我真的没有看到以下问题的模式。答案确实根据具体情况而变化。

当您将x和y都设置为0时，边框位于何处？它不在屏幕上吗？原产地被削减了一半吗？还是完全可见？
当您将宽度设置为100时，填充是98宽还是100宽？
当矩形未定位在整数坐标时，1px粗边框会发生什么？

示例：

var sh:Shape = new Shape();
sh.graphics.lineStyle(1.0, 0x00FF00, 1.0, false, LineScaleMode.NONE);
sh.graphics.beginFill(0xFF0000, 1.0);
sh.graphics.drawRect(0, 0, 100, 100);
sh.graphics.endFill();
addChild(sh);
sh.x = 10;
sh.y = 10;

我试图在x：10，y：10处创建一个100x100的正方形。当我在Photoshop中测量总宽度和高度时，它显示为101x101。奇怪！人们可能会期望最终尺寸为100x100（内部边框）或102x102（外部边框）。

enter image description here

Answer 1

Flash显示对象中的笔划位于其填充边缘。这样，行程的一半位于填充物之外;另一半位于填充范围内。这与CSS中的边框不同，后者完全位于内容区域之外。

最好用一个位于舞台上的物体来说明，它具有实心填充和半透明行程。在下图中，矩形是200乘200像素，行程为10像素。填充为#00FFFF，100％alpha，行程为#FF0000，alpha值为50％。注意笔划外的5像素厚区域如何与舞台颜色混合，而内部5像素厚区域与填充颜色混合。因此，在Photoshop中测量的每一面的总宽度为210像素（5 + 200 + 5）。

所以，回答你的问题......

当您将x和y都设为0时，边框位于何处？它不在屏幕上吗？原产地被削减了一半吗？还是完全可见？

在对象内可以看到一半的左右笔划。另一半将被舞台边缘切断。
当您将宽度设置为100时，填充为98宽还是100宽？

填充宽度为100像素。虽然每边的矩形宽度的一半被笔划占据，但笔划实际上不会占用空间或剪切填充;你只是看不到笔划后面的填充区域（见上图）。
当矩形未定位在整数坐标时，1px粗边框会发生什么？

如果没有为该笔划启用stroke hinting，则会将其绘制为消除锯齿或模糊。如果打开笔划提示，则笔划将尽可能大幅地绘制（同时仍保持足够的抗锯齿）。

Answer 2

闪存中不存在边距和填充。你可以模仿它们，这是真的，但这不会使它们变得更有形。

唯一的特点来自于中风的测量。

否则，没有胡说八道。

参见差异

DisplayObject.getRect（）：http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/DisplayObject.html?filter_flex=4.1&filter_flashplayer=10.2&filter_air=2.6#getRect%28%29
DisplayObject.getBounds（）：http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/display/DisplayObject.html?filter_flex=4.1&filter_flashplayer=10.2&filter_air=2.6#getBounds%28%29

如果你想要像素精确的东西，只使用填充，而不是笔划。

猜猜，绘制圆圈的最简单方法是什么？你在这里：

graphics.lineStyle(40); 
graphics.moveTo(100, 100);
graphics.lineTo(100, 101);

闪光灯中的行程具有帽型，接合方法和厚度，同时保持不占空间。

Flash矩形的盒子模型是什么？

2 个答案: