0

我正在努力使用自定义剪辑功能在组形状中应用角半径（在所有边上）。

这是我的代码框：

https://codesandbox.io/s/w28nrrj885

4

1 回答 1

3

我将您的 clipSquare 函数复制到下面的纯 JS 片段中以测试您的假设。都很好。

进一步查看您的代码，问题在于您在组剪辑函数的定义中使用与用于画布定义相同的 x,y,w,h 值。这具有使组从画布的右边缘和下边缘溢出的效果，因此隐藏了圆角。

如果你改变你的代码

this.clipSquare(ctx, x, y, width, height, 30);`

到

this.clipSquare(ctx, 0, 0, width-x, height-y, 30);

然后你会看到所有 4 个角。

我将把这个片段留给未来的读者，因为它用纯 JS 说明了 clipfunc。

// The following variables define the position on the rect and clipping region
var oX = 20, oY = 10, oW = 300, oH = 200, radius = 30;

var stage = new Konva.Stage({container: 'container', width: 500, height: 300})
var layer = new Konva.Layer();
stage.add(layer)
var rect1 = new Konva.Rect({ x: oX, y: oY, width: oW, height: oH, fill: 'cyan'})
var rect2 = new Konva.Rect({ x: oX, y: oY, width: oW, height: oH, fill: 'magenta'})


var  clipSquare = function(ctx, x, y, width, height, radius)  {
    ctx.beginPath();
    ctx.moveTo(x + radius, y);
    ctx.lineTo(x + width - radius, y);
    ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
    ctx.lineTo(x + width, y + height - radius);
    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
    ctx.lineTo(x + radius, y + height);
    ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
    ctx.lineTo(x, y + radius);
    ctx.quadraticCurveTo(x, y, x + radius, y);
    ctx.closePath();
  };
  
var group = new Konva.Group({
  clipFunc: function(ctx) { 
    clipSquare(ctx, oX, oY, oW, oH, radius)
    },
  draggable: true
});

layer.add(rect1)
group.add(rect2)
layer.add(group)
stage.draw();
#container {
width: 500px;
height: 300px;
background-color: #ccc;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/konva/3.2.5/konva.min.js"></script>

<div id='container'>

</div>

于 2019-05-08T11:41:48.823 回答