Как добавить радиус угла на группу конва, используя функцию обрезки? - PullRequest
Новая
       18

Как добавить радиус угла на группу конва, используя функцию обрезки?

0 голосов
/ 07 мая 2019

Я изо всех сил стараюсь применить угловой радиус (со всех сторон) в форме группы, используя пользовательскую функцию обрезки.

Вот мои коды и коробка:

https://codesandbox.io/s/w28nrrj885

1 Ответ

1 голос
/ 08 мая 2019

Я скопировал вашу функцию 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>
...