圆角矩形

This commit is contained in:
ruanwujing
2024-01-29 20:12:29 +08:00
parent 24d2a910bf
commit 39e54649cd
6 changed files with 1584 additions and 0 deletions

View File

@@ -0,0 +1,248 @@
import { IAssembler, IRenderData, RenderData, dynamicAtlasManager } from "cc";
import { GPRoundBoxSprite } from "./GPRoundBoxSprite";
export const GPRoundBoxAssembler: IAssembler = {
// 根据圆角segments参数构造网格的顶点索引列表
GetIndexBuffer(sprite:GPRoundBoxSprite) {
let indexBuffer = [
0, 1, 2, 2, 3, 0,
4, 5, 6, 6, 7, 4,
8, 9, 10, 10, 11, 8
]
// 为四个角的扇形push进索引值
let index = 12
let fanIndexBuild = function(center, start, end) {
let last = start;
for (let i = 0; i < sprite.segments - 1; i++) {
// 左上角 p2为扇形圆心p1/p5为两个边界
let cur = index;
index++;
indexBuffer.push(center, last, cur);
last = cur;
}
indexBuffer.push(center, last, end)
}
if (sprite.leftBottom)
fanIndexBuild(3, 4, 0);
if (sprite.leftTop)
fanIndexBuild(2, 1, 5);
if (sprite.rightTop)
fanIndexBuild(9, 6, 10);
if (sprite.rightBottom)
fanIndexBuild(8, 11, 7);
return indexBuffer
},
createData (sprite: GPRoundBoxSprite) {
const renderData = sprite.requestRenderData();
let corner = 0;
corner += sprite.leftBottom ? 1: 0;
corner += sprite.leftTop ? 1: 0;
corner += sprite.rightTop ? 1: 0;
corner += sprite.rightBottom ? 1: 0;
let vNum = 12 + (sprite.segments - 1) * corner;
renderData.dataLength = vNum;
renderData.resize(vNum, 18 + sprite.segments * 3 * corner);
let indexBuffer = GPRoundBoxAssembler.GetIndexBuffer(sprite);
renderData.chunk.setIndexBuffer(indexBuffer);
return renderData;
},
// 照抄simple的
updateRenderData (sprite: GPRoundBoxSprite) {
const frame = sprite.spriteFrame;
dynamicAtlasManager.packToDynamicAtlas(sprite, frame);
this.updateUVs(sprite);// dirty need
//this.updateColor(sprite);// dirty need
const renderData = sprite.renderData;
if (renderData && frame) {
if (renderData.vertDirty) {
this.updateVertexData(sprite);
}
renderData.updateRenderData(sprite, frame);
}
},
// 局部坐标转世界坐标 照抄的,不用改
updateWorldVerts (sprite: GPRoundBoxSprite, chunk: { vb: any; }) {
const renderData = sprite.renderData!;
const vData = chunk.vb;
const dataList: IRenderData[] = renderData.data;
const node = sprite.node;
const m = node.worldMatrix;
const stride = renderData.floatStride;
let offset = 0;
const length = dataList.length;
for (let i = 0; i < length; i++) {
const curData = dataList[i];
const x = curData.x;
const y = curData.y;
let rhw = m.m03 * x + m.m07 * y + m.m15;
rhw = rhw ? 1 / rhw : 1;
offset = i * stride;
vData[offset + 0] = (m.m00 * x + m.m04 * y + m.m12) * rhw;
vData[offset + 1] = (m.m01 * x + m.m05 * y + m.m13) * rhw;
vData[offset + 2] = (m.m02 * x + m.m06 * y + m.m14) * rhw;
}
},
// 每帧调用的把数据和到一整个meshbuffer里
fillBuffers (sprite: GPRoundBoxSprite) {
if (sprite === null) {
return;
}
const renderData = sprite.renderData!;
const chunk = renderData.chunk;
if (sprite.node.hasChangedFlags || renderData.vertDirty) {
// const vb = chunk.vertexAccessor.getVertexBuffer(chunk.bufferId);
this.updateWorldVerts(sprite, chunk);
renderData.vertDirty = false;
}
// quick version
const bid = chunk.bufferId;
const vidOrigin = chunk.vertexOffset;
const meshBuffer = chunk.meshBuffer;
const ib = chunk.meshBuffer.iData;
let indexOffset = meshBuffer.indexOffset;
const vid = vidOrigin;
// 沿着当前这个位置往后将我们这个对象的index放进去
let indexBuffer = GPRoundBoxAssembler.GetIndexBuffer(sprite);
for (let i = 0; i < renderData.indexCount; i++) {
ib[indexOffset++] = vid + indexBuffer[i];
}
meshBuffer.indexOffset += renderData.indexCount;
},
// 计算每个顶点相对于sprite坐标的位置
updateVertexData (sprite: GPRoundBoxSprite) {
const renderData: RenderData | null = sprite.renderData;
if (!renderData) {
return;
}
const uiTrans = sprite.node._uiProps.uiTransformComp!;
const dataList: IRenderData[] = renderData.data;
const cw = uiTrans.width;
const ch = uiTrans.height;
const appX = uiTrans.anchorX * cw;
const appY = uiTrans.anchorY * ch;
const left = 0 - appX;
const right = cw - appX;
const top = ch - appY;
const bottom = 0 - appY;
const left_r = left + sprite.radius;
const bottom_r = bottom + sprite.radius;
const top_r = top - sprite.radius;
const right_r = right - sprite.radius;
// 三个矩形的顶点
dataList[0].x = left;
dataList[0].y = sprite.leftBottom ? bottom_r: bottom;
dataList[1].x = left;
dataList[1].y = sprite.leftTop ? top_r: top;
dataList[2].x = left_r;
dataList[2].y = sprite.leftTop ? top_r: top;
dataList[3].x = left_r;
dataList[3].y = sprite.leftBottom ? bottom_r: bottom;
dataList[4].x = left_r;
dataList[4].y = bottom;
dataList[5].x = left_r;
dataList[5].y = top;
dataList[6].x = right_r;
dataList[6].y = top;
dataList[7].x = right_r;
dataList[7].y = bottom;
dataList[8].x = right_r;
dataList[8].y = sprite.rightBottom ? bottom_r: bottom;
dataList[9].x = right_r;
dataList[9].y = sprite.rightTop ? top_r: top;
dataList[10].x = right;
dataList[10].y = sprite.rightTop ? top_r: top;
dataList[11].x = right;
dataList[11].y = sprite.rightBottom ? bottom_r: bottom;
// 扇形圆角的顶点
let index = 12;
let fanPosBuild = function(center, startAngle) {
for (let i = 1; i < sprite.segments; i++) {
// 我这里顶点都是按顺时针分配的,所以角度要从开始角度减
// 每个扇形都是90度
let angle = startAngle * Math.PI / 180 - i / sprite.segments * 0.5 * Math.PI;
dataList[index].x = center.x + Math.cos(angle) * sprite.radius;
dataList[index].y = center.y + Math.sin(angle) * sprite.radius;
index++;
}
}
if (sprite.leftBottom)
fanPosBuild(dataList[3], 270);
if (sprite.leftTop)
fanPosBuild(dataList[2], 180);
if (sprite.rightTop)
fanPosBuild(dataList[9], 90);
if (sprite.rightBottom)
fanPosBuild(dataList[8], 0);
renderData.vertDirty = true;
},
// 更新计算uv
updateUVs (sprite: GPRoundBoxSprite) {
if (!sprite.spriteFrame) return;
const renderData = sprite.renderData!;
const vData = renderData.chunk.vb;
const uv = sprite.spriteFrame.uv;
// 这里我打印了一下uv的值第一个看上去是左上角但其实opengl端的纹理存在上下颠倒问题所以这里其实还是左下角
// 左下,右下,左上,右上
const uv_l = uv[0];
const uv_b = uv[1];
const uv_r = uv[2];
const uv_t = uv[5];
const uv_w = Math.abs(uv_r - uv_l);
const uv_h = uv_t - uv_b;
const uiTrans = sprite.node._uiProps.uiTransformComp!;
const dataList: IRenderData[] = renderData.data;
const cw = uiTrans.width;
const ch = uiTrans.height;
const appX = uiTrans.anchorX * cw;
const appY = uiTrans.anchorY * ch;
// 用相对坐标计算uv
for (let i = 0; i < renderData.dataLength; i++) {
vData[i * renderData.floatStride + 3] = uv_l + (dataList[i].x + appX) / cw * uv_w;
vData[i * renderData.floatStride + 4] = uv_b + (dataList[i].y + appY) / ch * uv_h;
}
},
// 照抄,不用改
updateColor (sprite: GPRoundBoxSprite) {
const renderData = sprite.renderData!;
const vData = renderData.chunk.vb;
let colorOffset = 5;
const color = sprite.color;
const colorR = color.r / 255;
const colorG = color.g / 255;
const colorB = color.b / 255;
const colorA = color.a / 255;
for (let i = 0; i < renderData.dataLength; i++, colorOffset += renderData.floatStride) {
vData[colorOffset] = colorR;
vData[colorOffset + 1] = colorG;
vData[colorOffset + 2] = colorB;
vData[colorOffset + 3] = colorA;
}
},
};

View File

@@ -0,0 +1,9 @@
{
"ver": "4.0.23",
"importer": "typescript",
"imported": true,
"uuid": "34dcec5f-d278-44e1-b921-ad33d4776917",
"files": [],
"subMetas": {},
"userData": {}
}

View File

@@ -0,0 +1,336 @@
import { _decorator, ccenum, CCFloat, CCInteger, cclegacy, Component, InstanceMaterialType, Material, Node, NodeEventType, RenderTexture, serializeTag, Sprite, SpriteAtlas, SpriteFrame, UIRenderer, Vec2} from 'cc';
import { BUILD, EDITOR } from 'cc/env';
import { GPRoundBoxAssembler } from './GPRoundBoxAssembler';
const { ccclass, property,type} = _decorator;
enum EventType {
SPRITE_FRAME_CHANGED = 'spriteframe-changed',
}
@ccclass('GPRoundBoxSprite')
export class GPRoundBoxSprite extends UIRenderer {
// 尺寸模式,可以看枚举原本定义的地方有注释说明
@property({serializable:true})
protected _sizeMode = Sprite.SizeMode.TRIMMED;
@type(Sprite.SizeMode)
get sizeMode () {
return this._sizeMode;
}
set sizeMode (value) {
if (this._sizeMode === value) {
return;
}
this._sizeMode = value;
if (value !== Sprite.SizeMode.CUSTOM) {
this._applySpriteSize();
}
}
// 图集
@property({serializable:true})
protected _atlas: SpriteAtlas | null = null;
@type(SpriteAtlas)
get spriteAtlas () {
return this._atlas;
}
set spriteAtlas (value) {
if (this._atlas === value) {
return;
}
this._atlas = value;
}
// 圆角用三角形模拟扇形的线段数量,越大,则越圆滑
@property({type:CCInteger, serializable:true})
_segments:number = 10
@property({type:CCInteger, serializable:true, min:1})
public get segments() {
return this._segments;
}
public set segments(segments) {
this._segments = segments;
this._renderData = null;
this._flushAssembler();
}
// 圆角半径
@property({type:CCFloat, serializable:true})
_radius:number = 20
@property({type:CCFloat, serializable:true, min:0})
public get radius() {
return this._radius
}
public set radius(radius) {
this._radius = radius;
this._updateUVs();
this.markForUpdateRenderData(true)
}
@property({serializable:true})
protected _spriteFrame: SpriteFrame | null = null;
@type(SpriteFrame)
get spriteFrame () {
return this._spriteFrame;
}
set spriteFrame (value) {
if (this._spriteFrame === value) {
return;
}
const lastSprite = this._spriteFrame;
this._spriteFrame = value;
this.markForUpdateRenderData();
this._applySpriteFrame(lastSprite);
if (EDITOR) {
this.node.emit(EventType.SPRITE_FRAME_CHANGED, this);
}
}
@property({serializable:true})
protected _leftTop:boolean = true;
@property({serializable:true})
get leftTop () {
return this._leftTop;
}
set leftTop (value:boolean) {
this._leftTop = value;
this.resetAssembler();
}
@property({serializable:true})
protected _rightTop:boolean = true;
@property({serializable:true})
get rightTop () {
return this._rightTop;
}
set rightTop (value:boolean) {
this._rightTop = value;
this.resetAssembler();
}
@property({serializable:true})
protected _leftBottom:boolean = true;
@property({serializable:true})
get leftBottom () {
return this._leftBottom;
}
set leftBottom (value:boolean) {
this._leftBottom = value;
this.resetAssembler();
}
@property({serializable:true})
protected _rightBottom:boolean = true;
@property({serializable:true})
get rightBottom () {
return this._rightBottom;
}
set rightBottom (value:boolean) {
this._rightBottom = value;
this.resetAssembler();
}
onLoad(): void {
this._flushAssembler();
}
public __preload () {
this.changeMaterialForDefine();
super.__preload();
if (EDITOR) {
this._resized();
this.node.on(NodeEventType.SIZE_CHANGED, this._resized, this);
}
}
public onEnable () {
super.onEnable();
// Force update uv, material define, active material, etc
this._activateMaterial();
const spriteFrame = this._spriteFrame;
if (spriteFrame) {
this._updateUVs();
}
}
public onDestroy () {
if (EDITOR) {
this.node.off(NodeEventType.SIZE_CHANGED, this._resized, this);
}
super.onDestroy();
}
/**
* @en
* Quickly switch to other sprite frame in the sprite atlas.
* If there is no atlas, the switch fails.
*
* @zh
* 选取使用精灵图集中的其他精灵。
* @param name @en Name of the spriteFrame to switch. @zh 要切换的 spriteFrame 名字。
*/
public changeSpriteFrameFromAtlas (name: string) {
if (!this._atlas) {
console.warn('SpriteAtlas is null.');
return;
}
const sprite = this._atlas.getSpriteFrame(name);
this.spriteFrame = sprite;
}
/**
* @deprecated Since v3.7.0, this is an engine private interface that will be removed in the future.
*/
public changeMaterialForDefine () {
let texture;
const lastInstanceMaterialType = this._instanceMaterialType;
if (this._spriteFrame) {
texture = this._spriteFrame.texture;
}
let value = false;
if (texture instanceof cclegacy.TextureBase) {
const format = texture.getPixelFormat();
value = (format === cclegacy.TextureBase.PixelFormat.RGBA_ETC1 || format === cclegacy.TextureBase.PixelFormat.RGB_A_PVRTC_4BPPV1 || format === cclegacy.TextureBase.PixelFormat.RGB_A_PVRTC_2BPPV1);
}
if (value) {
this._instanceMaterialType = InstanceMaterialType.USE_ALPHA_SEPARATED;
} else {
this._instanceMaterialType = InstanceMaterialType.ADD_COLOR_AND_TEXTURE;
}
if (lastInstanceMaterialType !== this._instanceMaterialType) {
// this.updateMaterial();
// d.ts里没有注上这个函数直接调用会表红。
this["updateMaterial"]();
}
}
protected _updateBuiltinMaterial () {
let mat = super._updateBuiltinMaterial();
if (this.spriteFrame && this.spriteFrame.texture instanceof RenderTexture) {
const defines = { SAMPLE_FROM_RT: true, ...mat.passes[0].defines };
const renderMat = new Material();
renderMat.initialize({
effectAsset: mat.effectAsset,
defines,
});
mat = renderMat;
}
return mat;
}
protected _render (render) {
render.commitComp(this, this.renderData, this._spriteFrame, this._assembler, null);
}
protected _canRender () {
if (!super._canRender()) {
return false;
}
const spriteFrame = this._spriteFrame;
if (!spriteFrame || !spriteFrame.texture) {
return false;
}
return true;
}
protected resetAssembler() {
this._assembler = null;
this._flushAssembler();
}
protected _flushAssembler () {
const assembler = GPRoundBoxAssembler;
if (this._assembler !== assembler) {
this.destroyRenderData();
this._assembler = assembler;
}
if (!this._renderData) {
if (this._assembler && this._assembler.createData) {
this._renderData = this._assembler.createData(this);
this._renderData!.material = this.getRenderMaterial(0);
this.markForUpdateRenderData();
if (this.spriteFrame) {
this._assembler.updateRenderData(this);
}
this._updateColor();
}
}
}
private _applySpriteSize () {
if (this._spriteFrame) {
if (BUILD || !this._spriteFrame.isDefault) {
if (Sprite.SizeMode.RAW === this._sizeMode) {
const size = this._spriteFrame.originalSize;
this.node._uiProps.uiTransformComp!.setContentSize(size);
} else if (Sprite.SizeMode.TRIMMED === this._sizeMode) {
const rect = this._spriteFrame.rect;
this.node._uiProps.uiTransformComp!.setContentSize(rect.width, rect.height);
}
}
this.markForUpdateRenderData(true)
this._assembler.updateRenderData(this);
}
}
private _resized () {
if (!EDITOR) {
return;
}
if (this._spriteFrame) {
const actualSize = this.node._uiProps.uiTransformComp!.contentSize;
let expectedW = actualSize.width;
let expectedH = actualSize.height;
if (this._sizeMode === Sprite.SizeMode.RAW) {
const size = this._spriteFrame.originalSize;
expectedW = size.width;
expectedH = size.height;
} else if (this._sizeMode === Sprite.SizeMode.TRIMMED) {
const rect = this._spriteFrame.rect;
expectedW = rect.width;
expectedH = rect.height;
}
if (expectedW !== actualSize.width || expectedH !== actualSize.height) {
this._sizeMode = Sprite.SizeMode.CUSTOM;
}
}
}
private _activateMaterial () {
const spriteFrame = this._spriteFrame;
const material = this.getRenderMaterial(0);
if (spriteFrame) {
if (material) {
this.markForUpdateRenderData();
}
}
if (this.renderData) {
this.renderData.material = material;
}
}
private _updateUVs () {
if (this._assembler) {
this._assembler.updateUVs(this);
}
}
private _applySpriteFrame (oldFrame: SpriteFrame | null) {
const spriteFrame = this._spriteFrame;
let textureChanged = false;
if (spriteFrame) {
if (!oldFrame || oldFrame.texture !== spriteFrame.texture) {
textureChanged = true;
}
if (textureChanged) {
if (this.renderData) this.renderData.textureDirty = true;
this.changeMaterialForDefine();
}
this._applySpriteSize();
}
}
}

View File

@@ -0,0 +1,9 @@
{
"ver": "4.0.23",
"importer": "typescript",
"imported": true,
"uuid": "99a6990b-561d-44a7-bc23-fb3e0e49fa3f",
"files": [],
"subMetas": {},
"userData": {}
}