`

flex Image的“宽高” 拉伸图片

    博客分类:
  • flex
阅读更多

 

 

 

  1. width和height是同一組的屬性,指的是Image的控制元件的寬和高,一般而言跟讀入的圖片沒有絕對關係,但是當Image元件沒有設定width和height屬性時,預設大小為讀入圖片的寬與高,需要注意的是complete事件並不會吐出正確的值,必須至少要等待到updateComplete事件才能讀取正確的資料。(該示範下次有時間再寫)
  2. contentWidth和contentHeight是同一組的屬性,指的是讀取圖片後的內容,在原廠的Help中寫道:』Width of the scaled content loaded by the control, in pixels.』,這句話是說contentWidth指的是縮放或調整後的圖片大小,若是在complete事件觸發時就是原始圖片的width或是height,反之在updateComplete事件觸發時,就是變更後的width或是height,這組屬性比較讓人造成誤會。
  3. content.width和content.height是屬於content同一組的屬性,content指的就是讀取圖片本身,而content.width和content.height就是圖片的widh和height屬性,complete事件觸發時就可以得到圖片原始大小,事後縮放並不會去影響該值。

 

拉伸图片(让图片100%填充容器):

img width=100% height=100%

img.content.width = 容器.width;
img.content.height = 容器.height;

//控制在缩放时是否对位图进行平滑处理。如果为 true,则会在缩放时对位图进行平滑处理。如果为 false,则不会在缩放时对位图进行平滑处理。

Bitmap(event.target.content).smoothing = true;

分享到:
评论

相关推荐

    flex 图片缩放

    当图片的原始宽高比例与Image组件设定的宽高比例不一致时,为了保持图像的原始比例,会自动填充或留出空白区域。例如,如果一个16:9比例的图片被放入一个4:3的Image组件中,图像将按比例缩放,使得宽度适应4,高度为...

    FLEX 背景图片设置

    在本文中,我们将深入探讨如何在FLEX应用程序中设置背景图片,这是一项非常实用的技巧,可以帮助你提升应用的视觉效果。FLEX是一种基于ActionScript 3(AS3)的开发框架,用于创建富互联网应用程序(RIA)。背景图片...

    用javascript实现背景自动拉伸

    ### 使用JavaScript实现网页背景图片自动拉伸的知识点 在网页设计与开发的过程中,经常会遇到需要对背景图片进行自适应处理的情况。特别是在响应式设计日益普及的今天,如何让背景图片根据不同的屏幕尺寸自动拉伸变...

    flex第一章到第七章学控件习

    给Image组件设置合适的宽高尺寸,并通过属性面板中的“源”选项来选择所需的图片文件。如果所加载的图片尺寸与Image组件的尺寸不匹配,可能会出现锯齿现象。 3. **平滑处理** - **查看锯齿问题**:设置好宽高后...

    Flex中背景平铺的做法

    `BitmapFill`允许我们指定一个图像作为填充源,并且可以控制该图像如何平铺或拉伸。在`updateDisplayList`方法中,我们首先清空图形上下文,然后创建一个`BitmapFill`实例,并设置其源为样式中的`backgroundImage`...

    flex特效、适合初学者学习

    例如,以下代码会在鼠标点击图片时,使图片的scaleX属性在1秒内从1变为2,实现拉伸效果: ```xml <mx:Image id="imageComponent" /> ``` 2)其他效果组件 除了AnimateProperty,还有Fade(淡入淡出)、Move(移动...

    1-09-田永辰_flex_主轴对齐鸭_

    此文件夹可能包含与项目相关的图片资源,比如用于美化布局或者作为 flex 项目的一部分。图片的使用可以通过 `img` 标签嵌入 HTML,或者作为背景图像使用 CSS 的 `background-image` 属性。 总的来说,"1-09-田永辰...

    图片等比缩放展示

    等比缩放确保了图片在不同尺寸的屏幕或窗口中保持其原始的比例,避免出现图像拉伸或压缩导致失真的情况。本话题主要探讨如何实现图片等比缩放,并兼容主流浏览器。 首先,我们需要理解等比缩放的概念。等比缩放意味...

    表头拉伸导航条渐变修改

    background-image: linear-gradient(to right, #007BFF, #0099CC); /* 这里从左到右(to right)渐变,从#007BFF渐变至#0099CC */ } ``` 在这个例子中,`linear-gradient`函数定义了一个从左到右的线性渐变,颜色...

    关于图片显示问题的CSS总结

    `width`和`height`属性可以设置图片大小,但要注意,当只设定一个维度时,另一个会按比例自动调整(保持原图宽高比)。如果希望图片自适应容器大小,可以使用`max-width: 100%`。 ```css img { max-width: 100%; ...

    flex效果篇

    例如,以下代码演示了如何使用`mouseDownEffect`触发器,在用户单击图片时触发`AnimateProperty`效果,使图片在1秒内水平拉伸至两倍宽: ```xml <mx:Image id="img" source="assets/plane.png" mouseDownEffect="{...

    (哇小侠)微信小程序学习用demo推荐:图片自适应,富文本解析(12.9).zip

    2. `scaleToFill`:不保持纵横比缩放图片,使图片的宽高完全拉伸至填满图片容器。 3. `aspectFill`:保持纵横比缩放图片,部分超出容器区域的图片会被裁剪。 4. `aspectFit`:保持纵横比缩放图片,使图片的短边能...

    button按钮在 IE 中两边被拉伸的解决办法

    6. **图片处理**:如果`bg_button.gif`是用于按钮背景的,可以通过CSS背景图片实现,以防止按钮内容拉伸。例如: ```css button { background-image: url(bg_button.gif); background-repeat: no-repeat; ...

    解决列高度自适应(相同)的五种方法

    通过设置容器的`display: flex`和`align-items: stretch`,所有子元素将自动拉伸至与最高的子元素相同的高度。 ```css .container { display: flex; } .column { flex: 1; } ``` 3. **CSS Grid**: CSS Grid...

    CSS相册简洁样式

    在CSS相册设计中,通常会用到CSS的`background-image`属性来设置背景图片,或者直接使用`<img>`标签插入图片。图片的布局和样式调整是关键,例如,可以使用CSS的`display: flex`或`grid`来实现响应式网格布局,使得...

    等高布局

    通过设置背景图像的`background-size`和`background-position`属性,可以实现背景图像在不同高度的元素中拉伸填充,从而达到视觉上的等高效果。 4. **绝对定位(Absolute Positioning)**: `absolute_layout2....

    CSS 水平居中并限定最大的宽度实现

    设置`flex: none`意味着该元素不会拉伸或缩小,而是保持其原始大小。这在内容过多时,能确保内容不会被裁剪,但当内容较少时,整个布局不会居中。 3. **不设置`flex`属性**: 对于内容不固定的元素,可以不设置`...

    29个常用的CSS小技巧汇总

    19. 利用`flex-grow`, `flex-shrink`和`flex-basis`控制弹性盒模型中的子元素拉伸和收缩。 20. 使用`z-index`控制元素的堆叠顺序,决定哪些元素在前面,哪些在后面。 21. 通过`transform`进行2D或3D转换,如旋转、...

    ExtJS ToolTip功能

    这里设置了组件的布局方式,类型为中心(`center`),排列方式为起始位置(`start`),并且使内容垂直方向上拉伸填充整个容器空间(`stretch`)。 3. **数据存储**: ```javascript var store = Ext.create('Ext...

Global site tag (gtag.js) - Google Analytics