神金 有通用的圆角方法吗

寒椿相逢

RUBY 代码复制

<canvas id="myCanvas" width="400" height="400" style="border:1px solid #000000;"></canvas>
<script>
  function drawRoundedRect(ctx, x, y, width, height, radius) {
    ctx.beginPath();
    ctx.moveTo(x + radius, y); // Move to the starting point
    ctx.lineTo(x + width - radius, y);
    ctx.arcTo(x + width, y, x + width, y + height, radius);
    ctx.lineTo(x + width, y + height - radius);
    ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);
    ctx.lineTo(x + radius, y + height);
    ctx.arcTo(x, y + height, x, y + height - radius, radius);
    ctx.lineTo(x, y + radius);
    ctx.arcTo(x, y, x + radius, y, radius);
 
    ctx.closePath();
    ctx.fill(); 
    ctx.stroke(); 
  }
 
  const canvas = document.getElementById('myCanvas');
  const ctx = canvas.getContext('2d');
 
  drawRoundedRect(ctx, 50, 50, 300, 200, 100); // Draw a rounded rectangle
</script>

<canvas id="myCanvas" width="400" height="400" style="border:1px solid #000000;"></canvas>


<script>


  function drawRoundedRect(ctx, x, y, width, height, radius) {


    ctx.beginPath();


    ctx.moveTo(x + radius, y); // Move to the starting point


    ctx.lineTo(x + width - radius, y);


    ctx.arcTo(x + width, y, x + width, y + height, radius);


    ctx.lineTo(x + width, y + height - radius);


    ctx.arcTo(x + width, y + height, x + width - radius, y + height, radius);


    ctx.lineTo(x + radius, y + height);


    ctx.arcTo(x, y + height, x, y + height - radius, radius);


    ctx.lineTo(x, y + radius);


    ctx.arcTo(x, y, x + radius, y, radius);


 


    ctx.closePath();


    ctx.fill(); 


    ctx.stroke(); 


  }


 


  const canvas = document.getElementById('myCanvas');


  const ctx = canvas.getContext('2d');


 


  drawRoundedRect(ctx, 50, 50, 300, 200, 100); // Draw a rounded rectangle


</script>

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

RUBY 代码复制

Bitmap.prototype.fillRoundedRect = function(x, y, width, height, cornerRadius, color) {
    const context = this.context;
    context.save();
    context.fillStyle = color;
    if (cornerRadius === 0) {
        context.fillRect(x, y, width, height);
    } else {
        const radius = Math.min(cornerRadius, width / 2, height / 2);
        context.beginPath();
        context.moveTo(x + radius, y);
        context.lineTo(x + width - radius, y);
        context.arcTo(x + width, y, x + width, y + height, radius);
        context.lineTo(x + width, y + height - radius);
        context.arcTo(x + width, y + height, x + width - radius, y + height, radius);
        context.lineTo(x + radius, y + height);
        context.arcTo(x, y + height, x, y + height - radius, radius);
        context.lineTo(x, y + radius);
        context.arcTo(x, y, x + radius, y, radius);
        context.fill(); 
    }
    context.restore();
    this._baseTexture.update();
};

Bitmap.prototype.fillRoundedRect = function(x, y, width, height, cornerRadius, color) {


    const context = this.context;


    context.save();


    context.fillStyle = color;


    if (cornerRadius === 0) {


        context.fillRect(x, y, width, height);


    } else {


        const radius = Math.min(cornerRadius, width / 2, height / 2);


        context.beginPath();


        context.moveTo(x + radius, y);


        context.lineTo(x + width - radius, y);


        context.arcTo(x + width, y, x + width, y + height, radius);


        context.lineTo(x + width, y + height - radius);


        context.arcTo(x + width, y + height, x + width - radius, y + height, radius);


        context.lineTo(x + radius, y + height);


        context.arcTo(x, y + height, x, y + height - radius, radius);


        context.lineTo(x, y + radius);


        context.arcTo(x, y, x + radius, y, radius);


        context.fill(); 


    }


    context.restore();


    this._baseTexture.update();


};

我给扔到bitmap里



爆了 不想看这个鬼东西了  来个能用的

pkeasygod

刚刚测试错误,修正一下

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

(已改4次)应该没错了吧

utunnels

js里面有个roundRect方法画圆角矩形的，楼主可以查一下