Fabric JS - How to make clip path in circle?

user_19633355 0
Viewed 69

I need to change polygon when moving controllers.

Problem

1

I did it using circle with start and end angles, but I had to implement a controller that moves center point.

const sectionCircle = new fabric.Circle({
selectable: false,
evented: false,
left: centerX - 200,
top: centerY - 200,
strokeWidth: circleRadius,
radius: circleRadius / 2,
startAngle: 180,
endAngle: 0,
fill: "transparent",
stroke: "#5de71520",
});

I found out that I can use clip path for multiple objects.

My question is how to render partly circle and partly polygon in that section and be able to change it when the controller position changes.

fabricjs clip-path polygon canvas
1 Answers

Sounds quite complicated with fabricJS
But that is quite simple just with pure javascript and canvas

canvas = document.getElementById("c");
context = canvas.getContext('2d')

range = document.getElementById("r");
range.oninput = draw

function draw() {
  context.beginPath()
  context.clearRect(0,0 , 100,100)
  context.fillStyle = "red"
  let r = Number(range.value)
  context.moveTo(30 + r, 70 - r)
  context.arc(30, 70, 40, -2.1, 0.25)
  context.fill()
}

draw()
<canvas id='c' width=100 height=100></canvas><br/>
<input type="range" min="-10" max="25" value="0" id="r">

Nothing special there...

  • moveTo(30 + r, 70 - r) that is our point that changes position
  • arc(30, 70, 40, -2.1, 0.25) partial circle with start and end angles
user_75998330
Related