drawRect introduce

本文详细介绍了UIView中的drawRect:方法,该方法用于在指定区域内绘制视图内容。子类如果需要绘制自己的视图,则需要覆盖此方法。默认情况下,该方法不执行任何操作。文章还解释了坐标转换的应用及如何获取当前绘图上下文。

drawRect:
Draws the receiver’s image within the passed-in rectangle.
- (void)drawRect:(CGRect)rect
Parameters
rect
A rectangle defining the area to restrict drawing to.
Discussion
Subclasses override this method if they actually draw their views. Subclasses need not override this method if the subclass is a container for other views. The default implementation does nothing. If your custom view is a direct UIView subclass, you do not need to call the implementation of super. Note that it is the responsibility of each subclass to totally fill rect if its superclass’s implementation actually draws and opaqueis YES.
When this method is invoked, the receiver can assume the coordinate transformations of its frame and bounds rectangles have been applied; all it needs to do is invoke rendering client functions. Use the UIGraphicsGetCurrentContext function to get the current graphics context for drawing that also has the coordinate origin in the upper-left corner. Do not retain the graphics context since it can change between calls to thedrawRect: method.
Availability
Available in iPhone OS 2.0 and later.
See Also
– setNeedsDisplay
– setNeedsDisplayInRect:
  @property contentMode
Declared In
UIView.h

同上改在我原文里 不然我看不懂import uiBase from "./uiBase.js"; import { Container, Graphics, Text, Assets, Sprite, Texture } from "pixi.js"; import gameData from "../Frame/gameDataMgr.js"; import networkMgr from "../Frame/networkMgr.js"; import { dataPersistenceMgr } from "../Frame/dataPersistenceMgr.js"; class uiShop extends uiBase { mainContainer; // 主界面容器 overlay; // 背景遮罩 shopBg3Container; // 弹窗容器 shopBgButton; // 按钮 buttonText; //按钮文字 closeButton; // 叉叉按钮 introduceText; // 介绍背景 isInist = false; async init() { super.init(); // 创建主界面容器 this.mainContainer = new Container(); this.container.addChild(this.mainContainer); // 预加载资源 await Assets.load([ "assets/UIShop/+.png", "assets/UIShop/复制.png", "assets/UIShop/商店底1_1.png", "assets/UIShop/商店底2.png", "assets/UIShop/商店底3.png", "assets/UIShop/赠送底.png", "assets/UIShop/赠送金额底.png", "assets/UIShop/UI1_02.png", "assets/UIShop/UI1_03.png", "assets/UIShop/UI1_05.png", "assets/UIShop/UI1_07.png", "assets/UIShop/UI1_09_2.png", "assets/UIShop/UI1_09.png", "assets/UIShop/UI1_11.png", "assets/UIShop/UI1_14.png", "assets/UIShop/UI1_17.png", "assets/UIShop/UI1_22.png", ]); // === 主界面内容 === // 商店底2 const shopBg1 = new Sprite(Texture.from("assets/UIShop/商店底2.png")); shopBg1.width = 650; shopBg1.height = 55; shopBg1.position.set(-330, -184); // 商店底1_1 const shopBg2 = new Sprite(Texture.from("assets/UIShop/商店底1_1.png")); shopBg2.width = 650; shopBg2.height = 400; shopBg2.position.set(-330, -210); // 叉叉按钮 this.closeButton = new Sprite(Texture.from("assets/UIShop/UI1_03.png")); this.closeButton.width = 50; this.closeButton.height = 50; this.closeButton.anchor.set(1, 0); // 锚点为右上角 this.closeButton.position.set(335 - 20, -190 + 20); // 右上偏移 this.closeButton.eventMode = "static"; this.closeButton.cursor = "pointer"; this.closeButton.on("pointerdown", () => this.hide()); // 将所有主界面元素加入 mainContainer this.mainContainer.addChild( shopBg2, shopBg1,this.closeButton); // === 弹窗与遮罩=== // 背景遮罩 this.overlay = new Graphics(); this.overlay.beginFill(0x000000, 0.6); this.overlay.drawRect(-375, -667, 750, 1334); this.overlay.endFill(); this.overlay.visible = true; this.container.addChild(this.overlay); // 弹窗背景 const shopBg3 = new Sprite(Texture.from("assets/UIShop/商店底3.png")); shopBg3.width = 450; shopBg3.height = 300; shopBg3.position.set(0, 0); // 弹窗容器 this.shopBg3Container = new Container(); this.shopBg3Container.position.set(-240, -140); this.shopBg3Container.addChild(shopBg3); this.container.addChild(this.shopBg3Container); // 介绍文字 this.introduceText = new Text("介绍背景", { fontFamily: "Arial", fontSize: 13, fill: 0xffffff, align: "center", stroke: "#000000", strokeThickness: 0, lineHeight: 25, }); this.introduceText.anchor.set(0.5); this.introduceText.position.set( shopBg3.width / 2 + 48, shopBg3.height / 2 - 10 ); this.shopBg3Container.addChild(this.introduceText); // 确认按钮 this.shopBgButton = new Sprite(Texture.from("assets/UIShop/UI1_09.png")); this.shopBgButton.width = 210; this.shopBgButton.height = 60; this.shopBgButton.position.set(-80, 80); this.shopBgButton.eventMode = "static"; this.shopBgButton.cursor = "pointer"; // 按钮文字 this.buttonText = new Text("哈咯", { fontSize: 28, fill: 0xffffff, align: "center", stroke: "#000000", strokeThickness: 2, }); this.buttonText.anchor.set(0.5); this.buttonText.position.set( this.shopBgButton.width / 2, this.shopBgButton.height / 2 ); this.shopBgButton.addChild(this.buttonText); // 按钮点击事件 this.shopBgButton.on("pointerdown", () => { if (this.shopBg3Container) this.shopBg3Container.visible = false; if (this.shopBgButton) this.shopBgButton.visible = false; if (this.overlay) this.overlay.visible = false; // 启用叉叉按钮 if (this.closeButton) { this.closeButton.eventMode = "static"; this.closeButton.cursor = "pointer"; } }); this.container.addChild(this.shopBgButton); // 初始化状态 this.resetState(); this.localize(); this.isInist = true; } show() { console.log(this.constructor.name + " 1"); if (!this.isInist) { this.init(); } else { this.resetState(); } console.log(this.constructor.name + " 2"); // 显示整个 UI 根容器 this.container.visible = true; } resetState() { // 安全地重置可见性 if (this.shopBg3Container) this.shopBg3Container.visible = true; if (this.shopBgButton) this.shopBgButton.visible = true; if (this.overlay) this.overlay.visible = true; if (this.mainContainer) this.mainContainer.alpha = 1; // 初始禁用叉叉按钮 if (this.closeButton) { this.closeButton.eventMode = "none"; this.closeButton.cursor = "default"; } } hide() { this.container.visible = false; } localize() { if (this.buttonText && this.introduceText) { this.buttonText.text = super.getLocalWords("Confirmation"); this.introduceText.text = super.getLocalWords("introduce"); } } } export const UIShop = new uiShop();
09-18
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值