绘制扇形矩形

问题描述

我正尝试用鼠标绘制一个扇形的矩形，如下图所示

I am trying to draw a scalloped rectangle with mouse like in below image

我可以使用下面的代码绘制矩形

I am able to draw rectangle with code below

function Rectangle(start, end) {
  var w = (end.x - start.x);
  var h = (end.y - start.y);
  return ["M", start.x, start.y, "L", (start.x + w), start.y, "L", start.x + w, start.y + h, "L", start.x, start.y + h, "L", start.x, start.y].join(' ');
}

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 = Rectangle(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" style="stroke-width: 4; stroke: RGBA(212, 50, 105, 1.00); fill: none" />
  </svg>

但是当我尝试转换成扇形矩形时，我看到了与 Infinite Monkey Theorm 完全匹配的不同模式. a>

But when I try to convert into scalloped rectangle I am seeing different patterns exactly matching Infinite Monkey Theorm

我尝试的方法是在虚拟元素上绘制矩形路径.将每个点的长度乘以15直到总长度.然后在这些点之间绘制圆弧.它不起作用.另外，我想避免使用getPointAtLength，因为它对移动设备的支持不是很好.

The approach I tried is, draw a rectangular path on a virtual element. Take each point at length multiplied by 15 till total length. Then drawing arcs between those points. It is not working. Also, I want to avoid using getPointAtLength because it's mobile support is not great.

var pathEle = document.createElementNS('http://www.w3.org/2000/svg', 'path');
pathEle.setAttribute('d', rectangle(point, target));
window.pathEle = pathEle;

var points = [];
for (var i = 0; i < pathEle.getTotalLength(); i += 15) {
  points.push(pathEle.getPointAtLength(i));
}

document.getElementById('test1').setAttribute('d', toSVGPath(points));

推荐答案

像这样吗?

我正在用弧形制作扇贝.您可能需要调整如何计算扇贝以获得更好的拐角.但我会留给你.

I'm using arcs to make the scallops. You may want to tweak how the scallops are calculated to get better corners. But I'll leave that to you.

var scallopSize = 30;

function Rectangle(start, end) {
  var minX = Math.min(start.x, end.x);
  var minY = Math.min(start.y, end.y);
  var w = Math.abs(end.x - start.x);
  var h = Math.abs(end.y - start.y);

  // Calculate scallop sizes
  var numW = Math.round(w / scallopSize);
  if (numW === 0) numW = 1;
  var numH = Math.round(h / scallopSize);
  if (numH === 0) numH = 1;
  var stepW = w / numW;
  var stepH = h / numH;

  // top
  var p = minX + stepW/2;  // start each size at half a scallop along
  var path = ["M", p, minY];
  for (var i=1; i < numW; i++) {   // numW-1 scallops per side
    p += stepW;
    path.push('A');
    path.push(stepW/2 + 1);   // Add 1 to the radius to ensure it's
    path.push(stepW/2 + 1);   // big enough to span the stepW
    path.push("0 0 1");
    path.push(p);
    path.push(minY);
  }
  // top right
  var p = minY + stepH/2;
  path.push('A');
  path.push(stepH/2.8);  // 2 * sqrt(2)
  path.push(stepH/2.8);  // corners are a little smaller than the scallops
  path.push("0 0 1");
  path.push(minX + w);
  path.push(p);
  // right
  for (var i=1; i < numH; i++) {
    p += stepH;
    path.push('A');
    path.push(stepH/2 + 1);
    path.push(stepH/2 + 1);
    path.push("0 0 1");
    path.push(minX + w);
    path.push(p);
  }
  // bottom right
  var p = minX + w - stepW/2;
  path.push('A');
  path.push(stepH/2.8);
  path.push(stepH/2.8);
  path.push("0 0 1");
  path.push(p);
  path.push(minY + h);
  // bottom
  for (var i=1; i < numW; i++) {
    p -= stepW;
    path.push('A');
    path.push(stepW/2 + 1);
    path.push(stepW/2 + 1);
    path.push("0 0 1");
    path.push(p);
    path.push(minY + h);
  }
  // bottom left
  var p = minY + h - stepH/2;
  path.push('A');
  path.push(stepH/2.8);
  path.push(stepH/2.8);
  path.push("0 0 1");
  path.push(minX);
  path.push(p);
  // left
  for (var i=1; i < numH; i++) {
    p -= stepH;
    path.push('A');
    path.push(stepH/2 + 1);
    path.push(stepH/2 + 1);
    path.push("0 0 1");
    path.push(minX);
    path.push(p);
  }
  // top left
  path.push('A');
  path.push(stepH/2.8);
  path.push(stepH/2.8);
  path.push("0 0 1");
  path.push(minX + stepW/2);
  path.push(minY);
  path.push('Z');

  return path.join(' ');
}

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 = Rectangle(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" style="stroke-width: 4; stroke: RGBA(212, 50, 105, 1.00); fill: none" />
  </svg>

这篇关于绘制扇形矩形的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！