我以前使用过graphics
包,但不确定是否可以完成。我试图用flex编程创建一个狗耳朵效果。可以做到吗?如果不可能,我还有其他选项或库。弯曲的狗耳效应?
Q
弯曲的狗耳效应?
2
A
回答
6
你可以逃脱的无证drawRoundRectComplex()为一个时髦的圆角版本:
graphics.drawRoundRectComplex(x, y, width, height, topLeftRadius, topRightRadius, bottomLeftRadius, bottomRightRadius);
这是从工具面板的矩形原始工具的ActionScript版本。
当然,您可以像@ Robusto建议的那样,在Graphics类中找到自己的头。 同时,这里是一个简单的45角度的版本:
var dogEars:Sprite = getDogEars45(200,100,15,0x009900,0x007700);
dogEars.x = dogEars.y = 50;
addChild(dogEars);
function getDogEars45(width:Number,height:Number,cornerSize:Number,baseFill:Number,highlightFill:Number):Sprite{
var rect:Sprite = new Sprite();
var base:Shape = new Shape();
base.graphics.beginFill(baseFill);
base.graphics.lineTo(width-cornerSize,0);
base.graphics.lineTo(width,cornerSize);
base.graphics.lineTo(width,height);
base.graphics.lineTo(0,height);
base.graphics.lineTo(0,0);
rect.addChild(base);
var corner:Shape = new Shape();
corner.graphics.beginFill(highlightFill);
corner.graphics.lineTo(cornerSize,cornerSize);
corner.graphics.lineTo(0,cornerSize);
corner.graphics.lineTo(0,0);
corner.graphics.endFill();
rect.addChild(corner);
corner.x = width-cornerSize;
return rect;
}
这里的粗糙(45角形)版本应该什么样子:
更新: 过几分钟玩这个,下面是一些舍入版本的代码,用于记录:
var dogEarsRounded:Sprite = getFlippedCornerRect(200,150,25,0x009900,0x00CC00);
dogEarsRounded.x = dogEarsRounded.y = 150;
addChild(dogEarsRounded);
var dogEarsRounded2:Sprite = getFlippedCornerRoundedRect(200,150,15,35,0x990000,0xCC0000);
dogEarsRounded2.x = dogEarsRounded2.y = 200;
addChild(dogEarsRounded2);
var dropShadow:DropShadowFilter = new DropShadowFilter(2,30,0,.5,2,2);
dogEarsRounded.filters = dogEarsRounded2.filters = [dropShadow];
function getFlippedCornerRect(width:Number,height:Number,cornerSize:Number,mainFill:int,cornerFill:int):Sprite{
var result:Sprite = new Sprite();
var topRight:Shape = new Shape();
topRight.graphics.beginFill(mainFill);
topRight.graphics.lineTo(width-cornerSize,0);
topRight.graphics.lineTo(width,cornerSize);
topRight.graphics.lineTo(width,height);
topRight.graphics.lineTo(0,height);
topRight.graphics.lineTo(0,0);
topRight.graphics.endFill();
result.addChild(topRight);
var corner:Shape = new Shape();
corner.graphics.beginFill(cornerFill);
corner.graphics.curveTo(0,cornerSize,cornerSize,cornerSize);
corner.graphics.lineTo(0,0);
corner.graphics.endFill();
result.addChild(corner);
corner.x = width-cornerSize;
return result;
}
function getFlippedCornerRoundedRect(width:Number,height:Number,rectRadius:Number,cornerSize:Number,mainFill:int,cornerFill:int):Sprite{
var result:Sprite = new Sprite();
var topRight:Shape = new Shape();
var hw:Number = width * .5;
var hh:Number = height* .5;
topRight.graphics.beginFill(mainFill);
topRight.graphics.lineTo(hw-cornerSize,0);
topRight.graphics.lineTo(hw,cornerSize);
topRight.graphics.lineTo(hw,hw);
topRight.graphics.lineTo(0,hw);
topRight.graphics.lineTo(0,0);
topRight.graphics.endFill();
topRight.x = hw;
result.addChild(topRight);
var corner:Shape = new Shape();
corner.graphics.beginFill(cornerFill);
corner.graphics.curveTo(0,cornerSize,cornerSize,cornerSize);
corner.graphics.lineTo(0,0);
corner.graphics.endFill();
result.addChild(corner);
corner.x = width-cornerSize;
var topLeft:Shape = new Shape();
topLeft.graphics.beginFill(mainFill);
topLeft.graphics.drawRoundRectComplex(0, 0, hw, hh, rectRadius, 0,0,0);
topLeft.graphics.endFill();
result.addChild(topLeft);
var bottomLeft:Shape = new Shape();
bottomLeft.graphics.beginFill(mainFill);
bottomLeft.graphics.drawRoundRectComplex(0, 0, hw, hh, 0, 0,rectRadius,0);
bottomLeft.graphics.endFill();
bottomLeft.y = hh;
result.addChild(bottomLeft);
var bottomRight:Shape = new Shape();
bottomRight.graphics.beginFill(mainFill);
bottomRight.graphics.drawRoundRectComplex(0, 0, hw, hh, 0, 0,0,rectRadius);
bottomRight.graphics.endFill();
bottomRight.x = hw;
bottomRight.y = hh;
result.addChild(bottomRight);
return result;
}
使用软阴影,看起来不错:
您可以填写一个不错的线性渐变的角落里,你可以修改功能,使您可以选择边角圆润,并且都没有,离散动画吧,等有乐趣!
我现在明白狗耳朵,只是想知道折角处发生了什么:P
+0
非常感谢,都是完美的答案。 – donpal 2010-05-20 21:08:00
4
相关问题
- 1. CSS3弯曲效果
- 2. CSS3弯曲/透视效果
- 3. 三JS弯曲(弯曲)CSS3DObject
- 4. 在弯曲项目中显示弯曲
- 5. 用CSS/JS/jQuery弯曲图像效果?
- 6. 龟弯曲线
- 7. 直线弯曲
- 8. 弯曲图像
- 9. 调用弯曲
- 10. 弯曲的UITableView/UIScrollView
- 11. Gef BendPoints弯曲的
- 12. 弯曲的Y轴
- 13. 转换卷曲弯曲
- 14. Android弯曲查看画布以产生卷曲效果
- 15. 弯曲度输出
- 16. ,动态弯曲verticalaxisrenderers
- 17. `UINavigationBar`弯曲扩展?
- 18. 弯曲曲线内的折线图
- 19. 弯曲的线条图案
- 20. 在侧面弯曲的Div
- 21. 奇怪的弯曲行为
- 22. 弯曲的底部视图
- 23. 不同的图标弯曲
- 24. css中的弯曲边框
- 25. 弯曲 - 的SWFLoader - 认证
- 26. 弯曲的css盒子
- 27. 在IE8弯曲的角落?
- 28. “弯曲”3D中的UIView
- 29. PHP功能弯曲/扭曲图像
- 30. 日期时间弯曲
狗耳?喜欢这个? http://bit.ly/adIv1v – spender 2010-05-20 16:25:57
我还没有听说过狗耳效应。斯佩德的建议似乎很难实现:那里的+1! :) – 2010-05-20 16:42:31
狗耳朵效果只是意味着纸张在一侧稍微折叠。将尝试找到一个图像。 – donpal 2010-05-20 16:45:19