Я изо всех сил пытаюсь применить угловой радиус (со всех сторон) в форме группы, используя пользовательскую функцию обрезки.
Вот мои коды и коробка:
Спасибо, в следующий раз запомню...
Я скопировал вашу функцию 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 угла.
Я оставлю этот фрагмент для будущих читателей, так как он иллюстрирует clipfunc в простом JS.
// 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>
Спасибо, я был так обеспокоен своей реализацией функции клипа, что пропустил эту деталь!!!
Хотелось бы знать, как это сделать, когда радиус представляет собой массив github.com/konvajs/konva/issues/1049#issuecomment-774459794
Просто для справки в будущем, имейте в виду, что размещение ссылок на сайты-песочницы разумно не одобряется с той точки зрения, что любая ссылка может стать бесхозной в будущем, тем самым снижая ценность вопроса как ссылки для будущих читателей. Я понимаю, что вам нужен транспайлер и т. д. для ES6, но вы могли бы, по крайней мере, опубликовать минимальный, но репрезентативный фрагмент кода, чтобы установить контекст вашей проблемы.