cocostudio 九宫格拉伸

最新推荐文章于 2023-10-04 10:19:43 发布
最新推荐文章于 2023-10-04 10:19:43 发布
阅读量6.5k 收藏 2
点赞数
分类专栏： cocos2dx 文章标签： cocos2d-x 九宫格 cocostudio
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/songtianming/article/details/37814277
版权

参考：http://upyun.cocimg.com/CocoStudio/helpdoc/v1.0.0.0/zh/index.html

九宫格

九宫格是利用一张很小的图片来绘制大区域图片却不失真的技术。

绘制时会遵循下面的规则：

 

a. 保持4个角部分不变形

b. 单向拉伸4条边（即在4个角两两之间的边，比如上边，只做横向拉伸）

c. 双向拉伸中间部分（即九宫格的中间部分，横向，纵向同时拉伸，PS：拉伸比例不一定相同）

 

Cocos Studio共四个参数：

 

"原点X"、"原点Y" 是一对参数，它可以确定我们中心区域的左下角的坐标（左下角为原点）；

"尺寸W"、"尺寸H"则确定中心区域的大小；






songtianming
关注
专栏目录
CocoStudio textfiled 文本点击区域按背景拉伸
OuterST
01-08 1192
我用的是cocos2dx2.2版本，textfield的settouchsize 只是一个样式，点击输入框的时候只有点击到文字才能进行输入，当文本长度很短视，体验感差的不行 直接说方法吧，废话也没人看、、 为要点击的区域增加 imageview exchangeTextBg = dynamic_cast(ui->getWidgetByName("reward_exchange_bg_0"))
android 九宫格 拉伸,CAScale9ImageView（九宫格图片拉伸）
weixin_42310891的博客
05-31 1174
类说明CAScale9ImageView是CrossApp提供的一种九宫格拉伸图片的解决方案，我们先来了解一下什么是九宫格图片拉伸。在App的设计过程中，为了适配不同的手机分辨率，图片大小需要拉伸或者压缩，这样就出现了可以任意调整大小的拉伸样式。CAScale9ImageView 属性(点击方法名可查看方法介绍)CAScale9ImageView 方法(点击方法名可查看方法介绍)CAScale9I...
cocostudio v1.6.0.0
02-28
cocostudio 1.6.0.0版本，官网目前越来越支持cocosCreator了，cocostudio快要找不到下载地址了。缓存于此。
【cocos】Sprite九宫格拉伸SLICED
烧仙草奶茶的博客
12-10 2309
将中间位置图片横向拉伸，两侧不改变
cornier的博客
08-11 1671
它的功能是创建一个内容可拉伸，而边角不拉伸的图片，需要两个参数，第一个是不拉伸区域和左边框的宽度，第二个参数是不拉伸区域和上边框的宽度 如果参数指定20，30。图片左边20个像素，上边30个像素。不会被拉伸，x坐标为21和一个像素会被横向复制，y坐标为31的一个像素会被纵向复制。注意：只是对一个像素进行复制到一定宽度 //[UIImage imageNamed:@"k"] 这种方式 系统会
Cocos Creator3.8 项目实战（四）巧用九宫格图像拉伸
w风雨无阻w的专栏
10-04 2393
通常ui 资源都是图片，也是最占资源量的资源类型，游戏中的ui 资源还是人机交互的最重要的部分，因此质量要求都非常高，通常都是使用rgb32位真彩色，这就导致资源量比较大。通常ui资源在打包时，都会以图集的形式展现，在加载到内存的时候，是整块加载，如果ui 没优化好，则会增大内存的开销。将鼠标移动到分割线上，可以看到光标形状改变了，这时候就可以按下并拖拽鼠标来更改分割线的位置。我们可以看到，图像周围有一圈绿色的线条，表示当前九宫格分割线的位置。可以鼠标滚轮放大图片预览试图，便于精准调整边框位置。
cocos2dx分辨率适配(9宫格布局)
445822357
12-19 283
先说下思路，将设计分辨率划分为9格，当屏幕分辨率和设计分辨率宽高比不同时， 调整每个格子的大小和位置，保证屏幕中所有元素完全显示在屏幕内，保证相对位置不变并且不变形。 下面是实现代码，欢迎大家拍砖、批评(自定义坐标点的代码还没有实现，为了看效果我使用了LayerColor) UILayer9.h #ifndef __UI_LAYER_9_H__ #define __UI_LAYER_9_...
九宫格背景图，实现复杂可拉伸背景图。
08-02
"九宫格背景图"是一种常见的设计手法，它允许背景图像在不同屏幕尺寸下保持良好的视觉效果，同时实现复杂图像的可拉伸性。这种技术主要用于解决传统背景图片在缩放时可能出现的失真问题，尤其是在响应式设计中，它能...
jQuery九宫格图片拉伸变大代码
04-07
本项目“jQuery九宫格图片拉伸变大代码”是基于jQuery实现的一个交互式图片展示方案，尤其适用于创建引人注目的网页布局。这个效果通过鼠标经过图片时触发的滑动手风琴切换，使得用户在浏览网页时能够体验到动态的...
基于jQuery实现图片九宫格拉伸变大特效源码.zip
11-21
【标题】"基于jQuery实现图片九宫格拉伸变大特效源码.zip" 提供的是一种使用JavaScript库jQuery创建的动态视觉效果，该效果能够使图片在九宫格布局中呈现出拉伸和放大的效果。这种特效常用于网页设计中，以吸引用户...
CocosCreator项目实战（2）：背景块设置
01-08
文章目录一、背景块节点二、预置资源三、绘制第一个背景块四、绘制所有背景块 一、背景块节点 在bg节点下创建Sprite(单色)节点命名为block，在block节点下创建Label节点命名为numberLabel，可预先设置numberLabel的String为2048，字体大小为60，行高为64，字体颜色为#000000。 二、预置资源 因为需要动态创建多个block，所以将它从层级管理器拖到资源管理器的prefabs目录下，删除层级管理器下的block节点。 在scripts目录下创建game脚本，选中层级管理器的Canvas节点，将game脚本拖到右侧属性管理器中，会自动在Can
九宫格切图神器
07-11
图片九宫格切图神器。把一张图片切割成9张，便于在微信朋友圈、微博、QQ空间展示。看上去美美的，逼格满满。傻瓜式一键切图。
Cocos中有关九宫格的解释
一个代码汪的时候
08-16 3856
Cocos中有关九宫格的解释 九宫格是利用一张很小的图片来绘制大区域图片的技术，用户可以制作九宫格图片，并设置拉伸的位置，图片会在贴图时只拉伸中心的部分，边角却不会被拉伸，这样只要设计时图片中心的颜色是纯色，那即使拉伸的再大也会保持原有的效果。正常情况下九宫格绘制会遵循下面的规则： a. 保持4个角部分不变形 b. 单向拉伸4条边（即在4个角两两之间的边，比如上边，只做横向拉伸） c. 双
UE4-（蓝图）第五十五课图片九宫格拉伸的使用
Stone的博客
11-29 6348
一、为什么使用九宫格拉伸 在UI布局的时候，有时候使用的图片与我们要制作的UI大小有差距，如果图片是普通方式直接拉伸很可能造成图片四个角上的效果与原图片差距太大甚至是变形，这时候使用九宫格模式拉伸，可以保持图片四个角上的样式不发生改变，只对中间区域拉伸。 原始 正常拉伸： 九宫格拉伸： 二、图片参数设置 1.新建一个UI 控件蓝图，在CanvasPanel下拖入一个Image，选择一张...
cocos 图片放缩变化
阿豪
12-28 329
原文链接: cocos 图片放缩变化 上一篇: ...
【Cocos2dx】使用CCScale9Sprite拉伸图片
编程记录，亲测有效
08-20 7278
如下图，在资源的Rescources文件夹中自带一个40x40的按钮图片 如果我们在Cocos2dx设定此图片自动拉伸为填充游戏屏幕的800x600图片，如下图： 总不能在外部利用Photoshop等图形处理软件，自行把这张40x40的图片拉伸为800x600，然后根据不同的设备的分辨率，做多张图片吧？ 此时可以利用Cocos2dx的CCScale9Sprite。 CCSc
Cocos2d动作：移动、变形、闪烁
潜心修炼2016
04-12 591
// 创建一个精灵    auto guaiwu = Sprite::create("res/tk.png");    guaiwu->setPosition(Point(200,200));    this->addChild(guaiwu);        // 开始移动,动画持续5秒    auto moveTo = MoveTo::create(5.0f, Point(500,500));
Cocos2d 中对图片的各种操作
weixin_34232744的博客
11-25 203
关于精灵的各种操作，总结一下以便以后复习查找。 内容简要： 1、初始化 2、创建无图的精灵 3、设置精灵贴图大小 4、添加入层中 5、对精灵进行缩放 6、对精灵款或高进行缩放 7、旋转精灵 8、设置精灵透明度 9、精灵的镜像反转 10、设置精灵的颜色 11、得到图的宽高 12、按照像素设定图片大小 13、在原有的基础上加xy的坐标 14、设置图片锚点 15、从新排...
Cocos2d 图片拉伸不变形的9妹
潜心修炼2016
04-12 1108
图片拉伸不变形的9妹         // 图片拉伸不变形的9妹    auto scale = Scale9Sprite::create("res/button.png");      scale->setContentSize(Size(76,33));        scale->setPosition(Point(200,500));      this->addChild(
qt设置样式九宫格拉伸
最新发布
01-17
Qt是一种跨平台的C++框架，用于开发图形用户界面（GUI）应用程序。在Qt中，可以通过设置样式来实现不同的界面效果，包括九宫格拉伸效果。 九宫格拉伸是一种常见的界面样式，它可以让界面元素在不同尺寸的窗口中自动适应。在Qt中，可以通过使用QSS（Qt Style Sheets）来设置九宫格拉伸效果。 首先，我们需要在Qt应用程序的代码中导入QSS模块。可以在头文件中添加以下代码： ```cpp #include <QApplication> #include <QFile> int main(int argc, char *argv[]) { QApplication app(argc, argv); QFile file(":style.qss"); // 导入样式文件 file.open(QFile::ReadOnly); QString styleSheet = QLatin1String(file.readAll()); app.setStyleSheet(styleSheet); // 设置应用程序的样式表 // ... return app.exec(); } ``` 然后，我们需要创建一个样式表文件，命名为style.qss，并在文件中添加以下代码： ```css QPushButton { border-image: url(:/images/button.png) 15 15 15 15 stretch stretch; } ``` 在上述代码中，我们使用border-image属性来设置按钮的背景图片并将其九宫格拉伸。其中，url()中的内容是我们想要设置的背景图片路径。15 15 15 15是用于指定九宫格区域大小的参数，表示左、上、右、下的边界宽度。stretch stretch表示在横向和纵向上都进行拉伸。 最后，我们将样式表文件style.qss导入到应用程序中，并将样式表应用到按钮控件上。通过这种方式，我们就可以实现Qt中的九宫格拉伸效果。 需要注意的是，以上代码只是一个示例，实际应用中需要根据具体的界面设计和需求来设置九宫格拉伸效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值