用路径弧'A`命令绘制一个椭圆

时间:2017-02-01 10:40:29

标签: javascript svg

我在下面写了使用路径弧命令制作椭圆。但我正在使用A arc命令。我想切换到function getEclipsePath(start, end) { var rx = (end.x - start.x) * 0.5; var ry = (end.y - start.y) * 0.5; var d = rx * 2; return "M " + start.x + " " + (start.y + ry) + " a " + rx + " " + ry + " 0 1 1 " + d + " 0 a " + rx + " " + ry + " 0 1 1 " + -d + " 0 z"; } var str = getEclipsePath(100, 100, 70, 50); var test = document.getElementById('test'); var point; document.addEventListener('mousedown', function(event) { point = { x: event.clientX, y: event.clientY } }); document.addEventListener('mousemove', function(event) { var target = { x: event.clientX, y: event.clientY } if (point) { var str = getEclipsePath(point, target); document.getElementById('test').setAttribute('d', str); } }); document.addEventListener('mouseup', function(event) { point = null; });命令。因为它取决于相对(假设是错误的评论)位置

我尝试给出直径值,但它产生随机形状。请帮我改一下。



body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0
}
svg {
  height: 100%;
  width: 100%
}

<svg>
  <path id="test" d="
      M 0 0
      a 20,10 0 1,1 40,0
      a 20,10 0 1,1 -40,0
      " />
</svg>
&#13;
$('#' + tableId).find("[id='" + childEl + "']").addClass('highlight');
// ------------------------^---------------^
&#13;
&#13;
&#13;

0 个答案:

没有答案