Обрезать линию внутри круга с помощью Two. js, используя SVG - PullRequest
Новая
       36

Обрезать линию внутри круга с помощью Two. js, используя SVG

1 голос
/ 24 марта 2020

Я хочу нарисовать линию, которая проходит через круг, но ограничена границей круга. Вот мой код: 

var elem = document.getElementById('draw-shapes');
var params = { width: 600, height: 400 };
var two = new Two(params).appendTo(elem);
var center = { x: params.width/2, y: params.height/2};
var circle = two.makeCircle(center.x, center.y, 80);
var line = two.makeLine(0, 0, 600, 300);

circle.fill = 'white';
circle.stroke = 'black';
circle.linewidth = 2;
// circle.clip = true;

line.stroke = 'black';
line.linewidth = 2;

line.mask = circle;

two.update();

Я попытался закомментировать и сохранить строку circle.clip = true, но она скрывает только сам круг, если задано значение true. Сама линия рисуется нормально.

Что я делаю не так?

Я использую Два. js. Это рабочий пример .

1 Ответ

1 голос
/ 25 марта 2020

Вы можете достичь этого с помощью чего-то вроде 

var line = two.makeLine(center.x+circle.vertices[0].x, center.y+circle.vertices[0].y, center.x+circle.vertices[5].x, center.y+circle.vertices[5].y);

output

Обновление:

Вершины рисуются на основе выбранного разрешения 

makeCircle: function(x, y, radius, resolution) {

    var circle = new Circle(x, y, radius, resolution);
    this.scene.add(circle);

    return circle;

  }

и 

/**
 * @name Two.Circle
 * @class
 * @extends Two.Path
 * @param {Number} [x=0] - The x position of the circle.
 * @param {Number} [y=0] - The y position of the circle.
 * @param {Number} radius - The radius value of the circle.
 * @param {Number} [resolution=4] - The number of vertices used to construct the circle.
 */
var Circle = function(ox, oy, r, resolution) {

  // At least 2 vertices are required for proper circlage
  var amount = resolution ? Math.max(resolution, 2) : 4;

  var points = [];
  for (var i = 0; i < amount; i++) {
    points.push(new Anchor());
  }

  Path.call(this, points, true, true, true);

  /**
   * @name Two.Circle#radius
   * @property {Number} - The size of the radius of the circle.
   */
  this.radius = r;

  this._update();

  if (typeof ox === 'number') {
    this.translation.x = ox;
  }
  if (typeof oy === 'number') {
    this.translation.y = oy;
  }

};

и 

_update: function() {

    if (this._flagRadius) {
      // Coefficient for approximating circular arcs with Bezier curves
      var c = (4 / 3) * Math.tan(Math.PI / (this.vertices.length * 2));

      var radius = this._radius;
      var rc = radius * c;

      for (var i = 0, numVertices = this.vertices.length; i < numVertices; i++) {
        var pct = i / numVertices;
        var theta = pct * TWO_PI;

        var x = radius * cos(theta);
        var y = radius * sin(theta);

        var lx = rc * cos(theta - HALF_PI);
        var ly = rc * sin(theta - HALF_PI);

        var rx = rc * cos(theta + HALF_PI);
        var ry = rc * sin(theta + HALF_PI);

        var v = this.vertices[i];

        v.command = Commands.curve;
        v.set(x, y);
        v.controls.left.set(lx, ly);
        v.controls.right.set(rx, ry);
      }
    }

    Path.prototype._update.call(this);
    return this;

  }

https://github.com/jonobr1/two.js/blob/dev/src/shapes/circle.js#L23

Вы можете использовать библиотеку или математически рассчитать баллы

...