Нарисуйте красивую аккуратную дугу без массивного прямого угла и вместо этого сделайте красивые углы

Я сделал дугу в Raphael то, к чему я стремился, было всего лишь одной дугой без большого прямого угла в ней.

Итак, всего одна плавная изогнутая линия без прямого угла.

Он довольно простой и использует эллиптическую дугу Рафаэля.

Вы можете увидеть его на странице http://jsfiddle.net/mailrox/uuAjV/1/.

Вот код:

    var raph = Raphael(0, 0, 1000, 1000);

var x = 150;
var y = 150;
var r = 100; //radius
var value = 100;
var maxValue = 360;

var pi = Math.PI;
var cos = Math.cos;
var sin = Math.sin;
var t = (pi/2) * 3; //translate
var rad = (pi*2 * (maxValue-value)) / maxValue + t;

var p = [
  "M", x, y,
  "l", r * cos(t), r * sin(t),
  "A", r, r, 0, +(rad > pi + t), 1, x + r * cos(rad), y + r * sin(rad),
  "z"
];

var param = {"stroke-width": 30}

var d = raph.path(p).attr(param);

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

Очень признателен за помощь с этой благодарностью!


javascript path automatic-ref-counting vector raphael
person MintDeparture    schedule 03.01.2013    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Попробуй это. Просто выберите закрытый путь ('z') из определения пути SVG (обратите внимание, что я не тестировал это решение):

var raph = Raphael(0, 0, 1000, 1000);

var x = 150;
var y = 150;
var r = 100; //radius
var value = 100;
var maxValue = 360;

var pi = Math.PI;
var cos = Math.cos;
var sin = Math.sin;
var t = (pi/2) * 3; //translate
var rad = (pi*2 * (maxValue-value)) / maxValue + t;

var p = [
  "M", x, y,
  "l", r * cos(t), r * sin(t),
  "A", r, r, 0, +(rad > pi + t), 1, x + r * cos(rad), y + r * sin(rad)
];

var param = {"stroke-width": 30}

var d = raph.path(p).attr(param);

jsFiddle

person geedubb    schedule 03.01.2013
comment
Это работает для устранения горизонтальной части квази-прямого угла. Если вам не нужна и вертикальная часть, просто измените l на m во второй команде контура, чтобы вы перешли на 12 часов вместо того, чтобы рисовать линию из центра. - person Chris Wilson; 03.01.2013

arrow_upward
1
arrow_downward

Вы можете расширить объект Raphael, включив в него функцию arc.

Расчет дуги был изменен из демонстрации Рафаэля «Полярные часы»: http://raphaeljs.com/polar-clock.html

Демо: http://jsfiddle.net/TmVHq/

Raphael.fn.arc = function(cx, cy, value, total, radius) {
    var alpha = 360 / total * value,
        a = (90 - alpha) * Math.PI / 180,
        x = cx + radius * Math.cos(a),
        y = cy - radius * Math.sin(a),
        path;

    if (total === value) {
        path = [['M', cx, cy - radius], ['A', radius, radius, 0, 1, 1, (cx - 0.01), cy - radius]];
    } else {
        path = [['M', cx, cy - radius], ['A', radius, radius, 0, +(alpha > 180), 1, x, y]];
    }

    return this.path(path);
}

var Paper = new Raphael('canvas', 300, 300);
var arc = Paper.arc(150, 150, 270, 360, 100);
arc.attr('stroke-width', 15);​
person amustill    schedule 03.01.2013