本文介绍了如何在CSS中绘制圆形扇区?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

好,使用纯CSS绘制圆形很容易。

  .circle {
width:100px;
height:100px;
border-radius:100px;
border:3px solid black;
background-color:green;
}

如何画扇形?给定一个度数X [0-360]我想画一个X度扇区。
我可以用纯CSS吗?



例如:





感谢+示例



谢谢Jonathan,我使用第一种方法。如果它帮助某人在这里的一个例子的JQuery函数,获取百分比和绘制一个扇区。扇区在百分比圆圈后面,并且该示例示出了如何从开始度数获得围绕圆的弧。





>


Well, drawing a circle with pure CSS is easy.

.circle{
    width: 100px;
    height: 100px;
    border-radius: 100px;
    border: 3px solid black;
    background-color: green;
}

How do I draw a sector? Given a degree X [0-360] I want to draw a X degrees sector.Can I do that with pure CSS?

For example:

Thanks + Example

Thank you Jonathan, I used the first method. If it helps someone here's an example of a JQuery function that gets percentage and draw a sector. The sector is behind the percentage circle and this example shows how to achieve an arc around a circle from a start degree.

JSFiddle demo

$(function drawSector(){
    // Get degrees
    ...
    // Draw a sector
    if (deg <= 180){
        activeBorder.css('background-image','linear-gradient(' + (90+deg) + 'deg, transparent 50%, #A2ECFB 50%),linear-gradient(90deg, #A2ECFB 50%, transparent 50%)');
    }
    else{
        activeBorder.css('background-image','linear-gradient(' + (deg-90) + 'deg, transparent 50%, #39B4CC 50%),linear-gradient(90deg, #A2ECFB 50%, transparent 50%)');
    }

    // Rotate to meet the start degree
    activeBorder.css('transform','rotate(' + startDeg + 'deg)');
});
解决方案

CSS and Multiple Background Gradients

Rather than trying to draw the green portion, you could draw the white portions instead:

pie {
    border-radius: 50%;
    background-color: green;
}

.ten {
    background-image:
        /* 10% = 126deg = 90 + ( 360 * .1 ) */
        linear-gradient(126deg, transparent 50%, white 50%),
        linear-gradient(90deg, white 50%, transparent 50%);
}

Demo: http://jsfiddle.net/jonathansampson/7PtEm/

Scalable Vector Graphics

If it's an option, you can accomplish a similar effect using SVG <circle> and <path> elements. Consider the following:

<svg>
  <circle cx="115" cy="115" r="110"></circle>
  <path d="M115,115 L115,5 A110,110 1 0,1 190,35 z"></path>
</svg>

The above is fairly straight forward. We have an element containing a circle and a path. The circle's center is at 115x115 (making the SVG element 230x230). The circle has a radius of 110, making it a total of 220 wide (leaving a border of 10).

We then add a <path> element, which is the most complicated portion of this example. This element has one attribute which determines where, and how the path is drawn. It starts with the following value:

M115,115

This instructs the path to start in the center of the aforementioned circle. Next, we draw a line from this location to the next location:

L115,5

This draws a vertical line from the center of the circle up to the top of the element (well, five pixels from the top). It is at this point things get a little more complicated but still very much intelligible.

We now draw an arc from our present location (115,5):

A110,110 1 0,1 190,35 z

This creates our arc and gives it a radius matching that of our circle (110). The two values represent the x-radius and y-radius, and both are equal since we're dealing with a circle. The next set of important numbers are the last, 190,35. This tells the arc where to complete.

As for the rest of the information (1 0,1 and z) these control the curvature, direction, and terminal of the arc itself. You can learn more about them by consulting any online SVG path reference.

To accomplish a "slice" of a different size, merely change the 190,35 to reflect a larger or smaller set of coordinates. You may find that you'll need to create a second, arc if you want to span more than 180 degrees.

If you want to determine the x and y coordinates from an angle, you can use the following equations:

x = cx + r * cos(a)
y = cy + r * sin(a)

With the above example, a degree of 76 would be:

x = 115 + 110 * cos(76)
y = 115 + 110 * sin(76)

Which gives us 205.676,177.272.

With some ease, you can create the following:

Demo: http://jsfiddle.net/jonathansampson/tYaVW/

这篇关于如何在CSS中绘制圆形扇区?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-03 23:25
查看更多