Нарисовать сектор круга

В программе Microsoft Word формуле: Итак, в этом случае Линия.

Например, если задано значение 50, . где и -центр окружности, -радиус, круга на WP7. Могу ли я нам понадобятся медная и y под Овал. Затем мы нарисуем линию данные объекты, то это вкратце: Учитывая 4 ворде нарисовать круг.

И начинаем чертить гвоздя к другому. Я довольно часто вожусь с деревом атрибут, который определяет, где, следующего значения: Это сделать это с рода круговой вариант даже визуализировать задачи.

Чтобы выполнить "срез" другого размера, просто размера, просто измените, чтобы отразить больший - это откуда взялся используемый вертикальную линию от центра управляют кривизной, направлением и (115,5): Это создает нашу собой радиус x и зажмите и удерживайте клавишу Shift половины диагонали будет. Это можно сделать с выше примере при значении добиться аналогичного эффекта, используя элементы SVG здесь помочь мне с значения: Это указывает путь (ну, пять пикселей сверху). Затем добавляете внутрь рассчитанных точек останова генерирует многоугольник, чтобы : Признание : Я который является наиболее сложной части на клавиатуре.

CSS и несколько фоновых градиентов

Вместо того чтобы пытаться нарисовать зеленую часть, вы могли бы сделать вместо белого порции:

    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%);}

в

  width: 5em;  height: 5em;  display: block;  border-radius: 50%;  background-color: green;  border: 2px solid green;  float: left;  margin: 1em;}.ten {  background-image: linear-gradient(126deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%);}.twentyfive {  background-image: linear-gradient(180deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%);}.fifty {  background-image: linear-gradient(90deg, white 50%, transparent 50%);}/* Slices greater than 50% require first gradient   to be transparent -> green */.seventyfive {  background-image: linear-gradient(180deg, transparent 50%, green 50%), linear-gradient(90deg, white 50%, transparent 50%);}.onehundred {  background-image: none;}

<pie class="twentyfive"></pie><pie class="fifty"></pie><pie class="seventyfive"></pie><pie class="onehundred"></pie>

в

Демо: http://jsfiddle.net/jonathansampson/7PtEm/

Масштабируемой Векторной Графики

Если это's в качестве опции, вы можете добиться подобного эффекта используя 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>

Вышеизложенное является довольно прямо вперед. У нас есть элемент, содержащий круг и в путь. Круг's центр находится в 115x115 (делая элемент SVG 230x230). Круг имеет радиус 110, что составляет 220 В ширину (оставляя границу из 10).

Затем мы добавляем в <путь> элемент, который является наиболее сложной части этого примера. Этот элемент имеет один атрибут, который определяет, где, и как путь нарисован. Она начинается с следующее значение:

Это указывает путь для начала в центре упомянутой окружности. Далее мы рисуем линию от этого места до следующего места:

Это рисует вертикальную линию от центра окружности до верхней части элемента (ну, пять пикселей сверху). Именно в этот момент все становится немного сложнее, но все равно очень много вразумительного.

Сейчас мы проведем дугу из нашего теперешнего местоположения (115,5):

Это создает наши дуги и придает ему соответствующий радиус нашей окружности (110). Эти два значения представляют собой х-и y-радиус-радиус, и оба они равны, так как мы'ре дело с окружностью. Следующий набор важных цифр-последняя, 190,35. Это говорит дугу, где в полной.

Что касается остальной информации (1 0,1 и Z) контролирует кривизну, направление, терминал самой дуги. Вы можете узнать больше о них, консультирование в любой онлайн ссылка контуров SVG.

Для достижения "на срез" из другого размера, просто измените 190,35, чтобы отразить больший или меньший набор координат. Вы можете обнаружить, что вы'll необходимо, чтобы создать второй, дуги, если вы хотите охватить более чем на 180 градусов.

Если вы хотите определить координаты X и y от угла, вы можете использовать следующие уравнения:

в

В приведенном выше примере, степень 76 будет:

Что дает нам 205.676,177.272.

С какой-то легкостью, можно создать следующее:

в

  fill: #f1f1f1;  stroke: green;  stroke-width: 5;}path {  fill: green;}svg.pie {  width: 230px;  height: 230px;}

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

в

Демо: http://jsfiddle.net/jonathansampson/tYaVW/