Drawing a Partial Circle

Drawing a partial circle

The arc length is 2 * M_PI * decimalInput. You need to add the arc length to the starting angle, like this:

let circleCenter = CGPointMake(100, 100)
let circleRadius = CGFloat(80)
var decimalInput = 0.75
let start = CGFloat(3 * M_PI_2)
let end = start + CGFloat(2 * M_PI * decimalInput)
let circlePath = UIBezierPath(arcCenter: circleCenter, radius: circleRadius, startAngle: start, endAngle: end, clockwise: true)
XCPCaptureValue("path", circlePath)

Result:

Note that the path will be flipped vertically when used to draw in a UIView.

How to draw a half circle on a plot?

Do you mean this?

x <- seq(0, pi, length.out = 500)
W <- 3
plot(cos(x) * W, sin(x) * W, type = "l")

Python, Matplotlib; drawing a partial circle

What about using an Arc?

from matplotlib.patches import Arc
radius = 1
arc = Arc((1, 0), radius*2, radius*2, color='b', theta1=90, theta2=360)
ax.add_patch(arc)

output:

output on top of the original circle:

Drawing a partial circle, with varying height, without gradients (for leaflet map markers)

An alternative solution would be using a line path that you clip with the circle. Now you can use the stroke-dasharray attribute to set the stroke and the gap length of the path.

I'm using an input type range only to show how the result for different values.

let len = line.getTotalLength();

itr.addEventListener("input",()=>{
  let dash = itr.value * len/100;
  line.setAttribute("stroke-dasharray",`${dash},${100 - dash}`);
  console.clear();console.log(itr.value)
})

<P><input type="range" value="25" id="itr"/></p>

<svg width="100" viewBox="0 0 100 100" version="1.1">

  <text text-anchor="middle" font-family="Verdana" font-size="320%" font-weight="bold" dominant-baseline="central" x="50" y="48" fill="#80C000">A</text>

  <clipPath id="clip">
    <path id="circ" d="M92.8,50A42.8, 42.8 0 1 1 7.2,50A42.8,42.8 0 1 1 92.8,50 M82,50A32,32 0 1 0 18,50 A32,32 0 1 0 82,50" />
  </clipPath>

  <path id="line" stroke="#80C000" stroke-width="86" d="M50,92.8V7.2" clip-path="url(#clip)"  stroke-dasharray="25 75" />

  <use href="#circ" fill="none" stroke="#80C000" />
</svg>

Draw only half of circle

You need to set:

circleLayer.strokeStart = fromValue

in the animateCircleTo(duration...) function.

You set the end of the stroke, but not the beginning. Consequently, all circle animations begin from 0.0, even if you intend them to begin at a later part of the stroke.

Like this:

// This is what you call to draw a partial circle.
func animateCircleTo(duration: NSTimeInterval, fromValue: CGFloat, toValue: CGFloat){
    // We want to animate the strokeEnd property of the circleLayer
    let animation = CABasicAnimation(keyPath: "strokeEnd")

    // Set the animation duration appropriately
    animation.duration = duration

    // Animate from 0 (no circle) to 1 (full circle)
    animation.fromValue = 0
    animation.toValue = toValue

    // Do an easeout. Don't know how to do a spring instead
    animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut)

    // Set the circleLayer's strokeEnd property to 1.0 now so that it's the
    // right value when the animation ends.
    circleLayer.strokeStart = fromValue
    circleLayer.strokeEnd = toValue

    // Do the actual animation
    circleLayer.addAnimation(animation, forKey: "animateCircle")
}

Is it possible to draw a partial circle outline in CSS (open ring shape)?

To create a circle that gradually draws it's outer path, use SVG.

SVG's stroke-dasharray property will turn any path into a dashed line, which you can use to your advantage by setting the dash size to be almost as long as the path itself.

Then use a CSS animation to gradually change the stroke-dashoffset to move the dash around the perimeter of your circle.

circle {  fill: white;  stroke: black;  stroke-width: 2;  stroke-dasharray: 250;  stroke-dashoffset: 1000;  animation: rotate 5s linear infinite;}
@keyframes rotate {  to {    stroke-dashoffset: 0;  }}

<svg height="100" width="100">  <circle cx="50" cy="50" r="40" /></svg>

---

Related Topics