Question

我正在使用CSS尝试创建一个附加到圆圈的标签（这是一个始终保留在地图上的弹出窗口）。以下链接将显示我正在尝试做的事情：Image。为了实现这一点，我一直在使用以下代码：

  $(popup._container.firstChild).css({
                background: "-webkit-radial-gradient(-29px" + percentZoom + ", circle closest-corner, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 58px, white 59px)"
            });

之前，我正在计算百分比缩放，具体取决于圆的半径和地图现在的缩放。

var percent = (50 * presentCircleRadius) / 300000 //when the radius is 300000 the percentage should be 50%
var percentZoom = (percent * zoom) / 6; // then calculate it the exact zoom that should be used depending on the zoom. Being 6 the default one.

当我放大地图时，这不起作用或有很多问题（考虑到圆圈并没有真正改变，但曲率似乎变得更平坦）。

我也尝试使用canvas来获得我想要的结果，但我遇到了问题。我使用两个拱形来构建顶部和底部，然后考虑使用两个矩形来创建圆的右边的两个部分。问题在于圆圈是透明的，它意味着从它的边缘开始，如果我使用这个解决方案，矩形将出现在圆圈的中间。

  var canvas = document.getElementById('myCanvas1');
  var context = canvas.getContext('2d');
  var x = canvas.width / 2;
  var y = canvas.height / 2;
  var radius = 75;
  var startAngle = 1.1 * Math.PI;
  var endAngle = 1.9 * Math.PI;
  var counterClockwise = false;

  context.beginPath();
  context.arc(x, y, radius, 1.6 * Math.PI, 0 * Math.PI, counterClockwise);
  context.lineWidth = 15;

  // line color
  context.strokeStyle = 'black';
  context.stroke();

  context.beginPath();
  context.arc(x, y, radius, 0 * Math.PI, 0.4 * Math.PI, counterClockwise);
  context.lineWidth = 15;

  // line color
  context.strokeStyle = 'red';
  context.stroke();

  context.beginPath();
  context.lineWidth = "10";
  context.strokeStyle = "blue";
  context.rect(x, y - radius, 150, radius);
  context.stroke();

<canvas id="myCanvas1" width="578" height="250"></canvas>

所以我想用线而不是矩形来创建标签的正确部分：fiddle，这个解决方案的问题是，如前所述，当你缩放时，曲率会发生变化，我发现没办法准确计算顶部和底部的线应该从哪里开始。

有没有办法做我想做的事情：制作它以便在放大和缩小时标签跟随圆的曲率，如果是这样，我怎么能这样做，因为可能有不止一个每个缩放的圆圈具有不同的半径？

标签连接到小册子地图上的圆圈，弯曲边

0 个答案: