Project1

标题: 神金 有通用的圆角方法吗 [打印本页]
作者: 寒椿相逢    时间: 2024-9-25 16:08
标题: 神金 有通用的圆角方法吗
RUBY 代码复制
  1. <canvas id="myCanvas" width="400" height="400" style="border:1px solid #000000;"></canvas>
  2. <script>
  3.   function drawRoundedRect(ctx, x, y, width, height, radius) {
  4.     ctx.beginPath();
  5.     ctx.moveTo(x + radius, y); // Move to the starting point
  6.     ctx.lineTo(x + width - radius, y);
  7.     ctx.arcTo(x + width, y, x + width, y + height, radius);
  8.     ctx.lineTo(x + width, y + height - radius);
  9.     ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);
  10.     ctx.lineTo(x + radius, y + height);
  11.     ctx.arcTo(x, y + height, x, y + height - radius, radius);
  12.     ctx.lineTo(x, y + radius);
  13.     ctx.arcTo(x, y, x + radius, y, radius);
  14.  
  15.     ctx.closePath();
  16.     ctx.fill(); 
  17.     ctx.stroke(); 
  18.   }
  19.  
  20.   const canvas = document.getElementById('myCanvas');
  21.   const ctx = canvas.getContext('2d');
  22.  
  23.   drawRoundedRect(ctx, 50, 50, 300, 200, 100); // Draw a rounded rectangle
  24. </script>

这是正常的圆角代码 画出来是这样







RUBY 代码复制
  1. Bitmap.prototype.fillRoundedRect = function(x, y, width, height, cornerRadius, color) {
  2.     const context = this.context;
  3.     context.save();
  4.     context.fillStyle = color;
  5.     if (cornerRadius === 0) {
  6.         context.fillRect(x, y, width, height);
  7.     } else {
  8.         const radius = Math.min(cornerRadius, width / 2, height / 2);
  9.         context.beginPath();
  10.         context.moveTo(x + radius, y);
  11.         context.lineTo(x + width - radius, y);
  12.         context.arcTo(x + width, y, x + width, y + height, radius);
  13.         context.lineTo(x + width, y + height - radius);
  14.         context.arcTo(x + width, y + height, x + width - radius, y + height, radius);
  15.         context.lineTo(x + radius, y + height);
  16.         context.arcTo(x, y + height, x, y + height - radius, radius);
  17.         context.lineTo(x, y + radius);
  18.         context.arcTo(x, y, x + radius, y, radius);
  19.         context.fill(); 
  20.     }
  21.     context.restore();
  22.     this._baseTexture.update();
  23. };

我给扔到bitmap里



爆了 不想看这个鬼东西了  来个能用的
作者: pkeasygod    时间: 2024-9-25 18:38
本帖最后由 pkeasygod 于 2024-9-25 20:18 编辑

刚刚测试错误,修正一下

bitmap的width及height 要大于 图形的 x+width y+height
把bitmap的尺寸改大大大 好像直接解决问题

(已改4次)应该没错了吧
作者: utunnels    时间: 2024-9-26 17:31
js里面有个roundRect方法画圆角矩形的，楼主可以查一下



欢迎光临 Project1 (https://rpg.blue/) Powered by Discuz! X3.1