设为首页收藏本站|繁體中文

Project1

 找回密码
 注册会员
搜索
查看: 2280|回复: 5
打印 上一主题 下一主题

[有事请教] 在MZ中如何添加圆角矩形

[复制链接]

Lv4.逐梦者

梦石
5
星屑
1828
在线时间
339 小时
注册时间
2014-4-1
帖子
270
跳转到指定楼层
1
发表于 2021-8-18 23:12:15 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

加入我们,或者,欢迎回来。

您需要 登录 才可以下载或查看,没有帐号?注册会员

x
如题,比如说MZ自带会在各个选项中添加一个黑色半透明的矩形嘛,我就很好奇这个矩形能不能变成圆角矩形

Lv4.逐梦者

梦石
0
星屑
18478
在线时间
1455 小时
注册时间
2017-4-16
帖子
222

开拓者

2
发表于 2021-8-19 11:19:01 | 只看该作者
可以改,改一个函数就行
个人RM交流群:568785370,目前在该群发布Ganfly系列插件
回复 支持 反对

使用道具 举报

Lv4.逐梦者

梦石
0
星屑
11175
在线时间
2066 小时
注册时间
2013-6-10
帖子
1516
3
发表于 2021-8-19 15:56:47 | 只看该作者
肯定可以改,改哪个函数呢?
回复 支持 反对

使用道具 举报

Lv4.逐梦者

梦石
0
星屑
7612
在线时间
1227 小时
注册时间
2008-12-14
帖子
555
4
发表于 2021-8-19 16:34:28 | 只看该作者
改 Window.prototype._setRectPartsGeometry = function(sprite, srect, drect, m)  这个函数
怎么改我还不知,再一个默认是有角这个概念的,只是有自己取角的方式。
需要购买本人MV插件必须先加wx好友。加不上wx就是本人忙,没时间卖。原则上太久以前的插件也不想卖,因为我也忘了,维护上会不给力。wx名:alskyif    本人插件地址:
   LCK_SRPG梦幻模拟战、火焰纹章类系统
   究极立绘ADV系统

   究极换装统合系统
   究极! 回想与CG系统
   消息文字的距离调整  
   自动返回上一张地图
回复 支持 反对

使用道具 举报

Lv3.寻梦者

梦石
0
星屑
2585
在线时间
297 小时
注册时间
2021-5-4
帖子
101
5
发表于 2021-8-19 23:22:04 | 只看该作者
本帖最后由 MH-Pride 于 2021-8-19 23:31 编辑

直接跟系统一样用个圆角皮肤
js改圆角很麻烦 css就可以直接改
所以窗口矩形都是在
function Rectangle() {
    this.initialize(...arguments);
}

Rectangle.prototype = Object.create(PIXI.Rectangle.prototype);
Rectangle.prototype.constructor = Rectangle;

Rectangle.prototype.initialize = function(x, y, width, height) {
    PIXI.Rectangle.call(this, x, y, width, height);
};
然后他们都是基础PIXI.Rectangle.prototype
所以需要在这改
JS 代码复制
  1. var Rectangle = /** @class */ (function () {
  2.             /**
  3.              * @param {number} [x=0] - The X coordinate of the upper-left corner of the rectangle
  4.              * @param {number} [y=0] - The Y coordinate of the upper-left corner of the rectangle
  5.              * @param {number} [width=0] - The overall width of this rectangle
  6.              * @param {number} [height=0] - The overall height of this rectangle
  7.              */
  8.             function Rectangle(x, y, width, height) {
  9.                 if (x === void 0) { x = 0; }
  10.                 if (y === void 0) { y = 0; }
  11.                 if (width === void 0) { width = 0; }
  12.                 if (height === void 0) { height = 0; }
  13.                 /**
  14.                  * @member {number}
  15.                  * @default 0
  16.                  */
  17.                 this.x = Number(x);
  18.                 /**
  19.                  * @member {number}
  20.                  * @default 0
  21.                  */
  22.                 this.y = Number(y);
  23.                 /**
  24.                  * @member {number}
  25.                  * @default 0
  26.                  */
  27.                 this.width = Number(width);
  28.                 /**
  29.                  * @member {number}
  30.                  * @default 0
  31.                  */
  32.                 this.height = Number(height);
  33.                 /**
  34.                  * The type of the object, mainly used to avoid `instanceof` checks
  35.                  *
  36.                  * @member {number}
  37.                  * @readOnly
  38.                  * @default PIXI.SHAPES.RECT
  39.                  * @see PIXI.SHAPES
  40.                  */
  41.                 this.type = exports.SHAPES.RECT;
  42.             }
  43.             Object.defineProperty(Rectangle.prototype, "left", {
  44.                 /**
  45.                  * returns the left edge of the rectangle
  46.                  *
  47.                  * @member {number}
  48.                  */
  49.                 get: function () {
  50.                     return this.x;
  51.                 },
  52.                 enumerable: true,
  53.                 configurable: true
  54.             });
  55.             Object.defineProperty(Rectangle.prototype, "right", {
  56.                 /**
  57.                  * returns the right edge of the rectangle
  58.                  *
  59.                  * @member {number}
  60.                  */
  61.                 get: function () {
  62.                     return this.x + this.width;
  63.                 },
  64.                 enumerable: true,
  65.                 configurable: true
  66.             });
  67.             Object.defineProperty(Rectangle.prototype, "top", {
  68.                 /**
  69.                  * returns the top edge of the rectangle
  70.                  *
  71.                  * @member {number}
  72.                  */
  73.                 get: function () {
  74.                     return this.y;
  75.                 },
  76.                 enumerable: true,
  77.                 configurable: true
  78.             });
  79.             Object.defineProperty(Rectangle.prototype, "bottom", {
  80.                 /**
  81.                  * returns the bottom edge of the rectangle
  82.                  *
  83.                  * @member {number}
  84.                  */
  85.                 get: function () {
  86.                     return this.y + this.height;
  87.                 },
  88.                 enumerable: true,
  89.                 configurable: true
  90.             });
  91.             Object.defineProperty(Rectangle, "EMPTY", {
  92.                 /**
  93.                  * A constant empty rectangle.
  94.                  *
  95.                  * @static
  96.                  * @constant
  97.                  * @member {PIXI.Rectangle}
  98.                  * @return {PIXI.Rectangle} An empty rectangle
  99.                  */
  100.                 get: function () {
  101.                     return new Rectangle(0, 0, 0, 0);
  102.                 },
  103.                 enumerable: true,
  104.                 configurable: true
  105.             });
  106.             /**
  107.              * Creates a clone of this Rectangle
  108.              *
  109.              * @return {PIXI.Rectangle} a copy of the rectangle
  110.              */
  111.             Rectangle.prototype.clone = function () {
  112.                 return new Rectangle(this.x, this.y, this.width, this.height);
  113.             };
  114.             /**
  115.              * Copies another rectangle to this one.
  116.              *
  117.              * @param {PIXI.Rectangle} rectangle - The rectangle to copy from.
  118.              * @return {PIXI.Rectangle} Returns itself.
  119.              */
  120.             Rectangle.prototype.copyFrom = function (rectangle) {
  121.                 this.x = rectangle.x;
  122.                 this.y = rectangle.y;
  123.                 this.width = rectangle.width;
  124.                 this.height = rectangle.height;
  125.                 return this;
  126.             };
  127.             /**
  128.              * Copies this rectangle to another one.
  129.              *
  130.              * @param {PIXI.Rectangle} rectangle - The rectangle to copy to.
  131.              * @return {PIXI.Rectangle} Returns given parameter.
  132.              */
  133.             Rectangle.prototype.copyTo = function (rectangle) {
  134.                 rectangle.x = this.x;
  135.                 rectangle.y = this.y;
  136.                 rectangle.width = this.width;
  137.                 rectangle.height = this.height;
  138.                 return rectangle;
  139.             };
  140.             /**
  141.              * Checks whether the x and y coordinates given are contained within this Rectangle
  142.              *
  143.              * @param {number} x - The X coordinate of the point to test
  144.              * @param {number} y - The Y coordinate of the point to test
  145.              * @return {boolean} Whether the x/y coordinates are within this Rectangle
  146.              */
  147.             Rectangle.prototype.contains = function (x, y) {
  148.                 if (this.width <= 0 || this.height <= 0) {
  149.                     return false;
  150.                 }
  151.                 if (x >= this.x && x < this.x + this.width) {
  152.                     if (y >= this.y && y < this.y + this.height) {
  153.                         return true;
  154.                     }
  155.                 }
  156.                 return false;
  157.             };
  158.             /**
  159.              * Pads the rectangle making it grow in all directions.
  160.              * If paddingY is omitted, both paddingX and paddingY will be set to paddingX.
  161.              *
  162.              * @param {number} [paddingX=0] - The horizontal padding amount.
  163.              * @param {number} [paddingY=0] - The vertical padding amount.
  164.              * @return {PIXI.Rectangle} Returns itself.
  165.              */
  166.             Rectangle.prototype.pad = function (paddingX, paddingY) {
  167.                 if (paddingX === void 0) { paddingX = 0; }
  168.                 if (paddingY === void 0) { paddingY = paddingX; }
  169.                 this.x -= paddingX;
  170.                 this.y -= paddingY;
  171.                 this.width += paddingX * 2;
  172.                 this.height += paddingY * 2;
  173.                 return this;
  174.             };
  175.             /**
  176.              * Fits this rectangle around the passed one.
  177.              *
  178.              * @param {PIXI.Rectangle} rectangle - The rectangle to fit.
  179.              * @return {PIXI.Rectangle} Returns itself.
  180.              */
  181.             Rectangle.prototype.fit = function (rectangle) {
  182.                 var x1 = Math.max(this.x, rectangle.x);
  183.                 var x2 = Math.min(this.x + this.width, rectangle.x + rectangle.width);
  184.                 var y1 = Math.max(this.y, rectangle.y);
  185.                 var y2 = Math.min(this.y + this.height, rectangle.y + rectangle.height);
  186.                 this.x = x1;
  187.                 this.width = Math.max(x2 - x1, 0);
  188.                 this.y = y1;
  189.                 this.height = Math.max(y2 - y1, 0);
  190.                 return this;
  191.             };
  192.             /**
  193.              * Enlarges rectangle that way its corners lie on grid
  194.              *
  195.              * @param {number} [resolution=1] resolution
  196.              * @param {number} [eps=0.001] precision
  197.              * @return {PIXI.Rectangle} Returns itself.
  198.              */
  199.             Rectangle.prototype.ceil = function (resolution, eps) {
  200.                 if (resolution === void 0) { resolution = 1; }
  201.                 if (eps === void 0) { eps = 0.001; }
  202.                 var x2 = Math.ceil((this.x + this.width - eps) * resolution) / resolution;
  203.                 var y2 = Math.ceil((this.y + this.height - eps) * resolution) / resolution;
  204.                 this.x = Math.floor((this.x + eps) * resolution) / resolution;
  205.                 this.y = Math.floor((this.y + eps) * resolution) / resolution;
  206.                 this.width = x2 - this.x;
  207.                 this.height = y2 - this.y;
  208.                 return this;
  209.             };
  210.             /**
  211.              * Enlarges this rectangle to include the passed rectangle.
  212.              *
  213.              * @param {PIXI.Rectangle} rectangle - The rectangle to include.
  214.              * @return {PIXI.Rectangle} Returns itself.
  215.              */
  216.             Rectangle.prototype.enlarge = function (rectangle) {
  217.                 var x1 = Math.min(this.x, rectangle.x);
  218.                 var x2 = Math.max(this.x + this.width, rectangle.x + rectangle.width);
  219.                 var y1 = Math.min(this.y, rectangle.y);
  220.                 var y2 = Math.max(this.y + this.height, rectangle.y + rectangle.height);
  221.                 this.x = x1;
  222.                 this.width = x2 - x1;
  223.                 this.y = y1;
  224.                 this.height = y2 - y1;
  225.                 return this;
  226.             };
  227.             return Rectangle;

点评

已经要涉及到PIXI了吗?插件新手还不是很理解,我当初以为js也可以和css一样可以很简单加个圆角,没想过到会那么复杂  发表于 2021-8-20 10:41
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册会员

本版积分规则

拿上你的纸笔,建造一个属于你的梦想世界,加入吧。
 注册会员
找回密码

站长信箱:[email protected]|手机版|小黑屋|无图版|Project1游戏制作

GMT+8, 2024-11-23 19:14

Powered by Discuz! X3.1

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表