用Java编写圆角

分类：编程问答

如何解决用Java编写圆角

我想为拐角创建圆角，用户可以在其中指定拐角的半径和细分数。为了找到这些新点，我将使用三个向量： p ， p1 和 p2 ，以及随后的线段： PP1 和 PP2 。 Desired Result

我发现a post on Stack Overflow可能具有解决方案，但是答案是针对C＃的，并且我使用Java语言。我已经包含了对代码的解释。

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius_slider = document.getElementById("radius");
var subdivs_slider = document.getElementById("subdivs");
var generateBtn = document.getElementById("generate");
var radiusReadout = document.getElementById("radiusReadout");
var subdivReadout = document.getElementById("subdivReadout");
    

class Point {
  constructor(x,y) {
    this.x = x;
    this.y = y;
  }
}

function DrawRoundedCorner(angularPoint,p1,p2,radius,subdivisions) {
  //Vector 1
  dx1 = angularPoint.x - p1.x;
  dy1 = angularPoint.y - p1.y;
  //Vector 2
  dx2 = angularPoint.x - p2.x;
  dy2 = angularPoint.y - p2.y;
  //Angle between vector 1 and vector 2 divided by 2
  angle = (Math.atan2(dy1,dx1) - Math.atan2(dy2,dx2)) / 2;
  // The length of segment between angular point and the
  // points of intersection with the circle of a given radius
  tan = Math.abs(Math.tan(angle));
  segment = radius / tan;
  //Check the segment
  length1 = GetLength(dx1,dy1);
  length2 = GetLength(dx2,dy2);
  length = Math.min(length1,length2);
  if (segment > length) {
    segment = length;
    radius = length * tan;
  }
  // Points of intersection are calculated by the proportion between 
  // the coordinates of the vector,length of vector and the length of the segment.
  var p1Cross = GetProportionPoint(angularPoint,segment,length1,dx1,dy1);
  var p2Cross = GetProportionPoint(angularPoint,length2,dx2,dy2);
  // Calculation of the coordinates of the circle 
  // center by the addition of angular vectors.
  dx = angularPoint.x * 2 - p1Cross.x - p2Cross.x;
  dy = angularPoint.y * 2 - p1Cross.y - p2Cross.y;
  L = GetLength(dx,dy);
  d = GetLength(segment,radius);
  var circlePoint = GetProportionPoint(angularPoint,d,L,dx,dy);
  //StartAngle and EndAngle of arc
  var startAngle = Math.atan2(p1Cross.y - circlePoint.y,p1Cross.x - circlePoint.x);
  var endAngle = Math.atan2(p2Cross.y - circlePoint.y,p2Cross.x - circlePoint.x);
  //Sweep angle
  var sweepAngle = endAngle - startAngle;
  //Some additional checks
  if (sweepAngle < 0) {
    startAngle = endAngle;
    sweepAngle = -sweepAngle;
  }
  if (sweepAngle > Math.PI)
    sweepAngle = Math.PI - sweepAngle;
  ctx.lineWidth = 2;
  ctx.strokeStyle = '#000000';
  ctx.beginPath();
  ctx.moveTo(p1.x,p1.y);
  ctx.lineTo(p1Cross.x,p1Cross.y);
  ctx.moveTo(p2.x,p2.y);
  ctx.lineTo(p2Cross.x,p2Cross.y);
  ctx.lineWidth = this.linewidth;
  ctx.strokeStyle = this.color;
  ctx.stroke();
  var left = circlePoint.x - radius;
  var top = circlePoint.y - radius;
  var diameter = 2 * radius;
  var degreeFactor = Math.PI*subdivisions;
  /*
  ctx.beginPath();
  ctx.arc(left,top,diameter,(startAngle * degreeFactor),(endAngle*degreeFactor));
  ctx.strokeStyle = "#00FF00";
  ctx.stroke();
  ctx.strokeStyle = "#000000";
  */
  //To get points of arc you can use this:
  pointsCount = Math.abs(sweepAngle * degreeFactor);
  sign = Math.sign(sweepAngle);
  points = [];
// you can remove the Math.ceil**0.5 thing and just have it as pointsCount - 1 or something.
  for (i = 0; i < pointsCount + (Math.round(subdivisions) % 2 == 0 ? 1 : 0); i++) {
    var pointX = circlePoint.x + Math.cos(startAngle + ((i/pointsCount) * sign * 2)) * radius;
    var pointY = circlePoint.y + Math.sin(startAngle + ((i/pointsCount) * sign * 2)) * radius;
    points[i] = new Point(pointX,pointY);
    ctx.beginPath();
    ctx.arc(points[i].x,points[i].y,1,2 * Math.PI);
    ctx.fillStyle = "#00FF00";
    ctx.fill();
  }
}
function GetLength(dx,dy) {
  return Math.sqrt(dx * dx + dy * dy);
}
function GetProportionPoint(point,length,dy) {
  factor = segment / length;
  return new Point(point.x - dx * factor,point.y - dy * factor);
}

function randomNumber(min,max) {  
    return Math.random() * (max - min) + min; 
}  

var p = new Point(randomNumber(0,canvas.width),randomNumber(0,canvas.height));
var p1 = new Point(randomNumber(0,canvas.height));
var p2 = new Point(randomNumber(0,canvas.height));

var dotRadius = 5;
function drawAll(radius,subdivisions) {
  ctx.clearRect(0,canvas.width,canvas.height);
  DrawRoundedCorner(p,subdivisions);
  ctx.font = '18px sans-serif';
  ctx.fillText('P',p.x - 20,p.y + 5);
  ctx.beginPath();
  ctx.arc(p.x,p.y,dotRadius,2 * Math.PI);
  ctx.fillStyle = "#00FF00";
  ctx.fill();
  ctx.fillStyle = "#000000";
  ctx.fillText('P1',p1.x + 10,p1.y + 6);
  ctx.beginPath();
  ctx.arc(p1.x,p1.y,2 * Math.PI);
  ctx.fill();
  ctx.beginPath();
  ctx.fillText('P2',p2.x + 10,p2.y + 6);
  ctx.arc(p2.x,p2.y,2 * Math.PI);
  ctx.fill();
}
let radiusValue = radius_slider.value;
let subdivsValue = subdivs_slider.value;
function handleSlider(){
  radiusValue = radius_slider.value;
  subdivsValue = subdivs_slider.value;
  radiusReadout.innerText = radius_slider.value;
  subdivReadout.innerText = subdivs_slider.value;
  drawAll(radiusValue,subdivsValue);
}
radius_slider.oninput = handleSlider;
subdivs_slider.oninput = handleSlider;
generateBtn.onclick = function()
{
  p = new Point(randomNumber(0,canvas.height));
  p1 = new Point(randomNumber(0,canvas.height));
  p2 = new Point(randomNumber(0,canvas.height));
  drawAll(radiusValue,subdivsValue);
}
drawAll(radiusValue,subdivsValue);
radiusReadout.innerText = radius_slider.value;
subdivReadout.innerText = subdivs_slider.value;
body {
  font-family: sans-serif;
  text-align: center;
}

#canvas {
  width: 150px;
  height: 150px;
  border: 1px solid rgb(200,200,200);
}
<canvas id="canvas" width=150 height=150></canvas><div>
<label for="radius">Radius</label>
<input type="range" min="1" max="100" value="10" class="slider" id="radius"><span id="radiusReadout"></span>
</div>
<div>
<label for="subdivs">Subdivs</label>
<input type="range" min="1" max="16" value="2" class="slider" id="subdivs"><span id="subdivReadout"></span>
</div>
<div>
<button id="generate" type="button">Generate New Points</button>     
</div>
我有两个问题：
  1. 为什么弧点不能始终连接我版本中的线？它们有时是正确的，但经常是不足/过大。
  2. 我怎么画弧线？我可以画点，但我不明白如何将其转换为HTML Canvas：
graphics.DrawArc(pen,left,(float)(startAngle * degreeFactor),(float)(sweepAngle * degreeFactor));

Here是Codepen上的较大版本。谢谢！

解决方法

好的，我不能保证这是正确的，因为我没有从头开始编写代码，也没有完全理解它，但是我已经着手使它看起来可行，并且包含了细分内容。 

    var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var radius_slider = document.getElementById("radius");
var subdivs_slider = document.getElementById("subdivs");
class Point {
  constructor(x,y) {
    this.x = x;
    this.y = y;
  }
}
function DrawRoundedCorner(angularPoint,p1,p2,radius,subdivisions) {
  //Vector 1
  dx1 = angularPoint.x - p1.x;
  dy1 = angularPoint.y - p1.y;
  //Vector 2
  dx2 = angularPoint.x - p2.x;
  dy2 = angularPoint.y - p2.y;
  //Angle between vector 1 and vector 2 divided by 2
  angle = (Math.atan2(dy1,dx1) - Math.atan2(dy2,dx2)) / 2;
  // The length of segment between angular point and the
  // points of intersection with the circle of a given radius
  tan = Math.abs(Math.tan(angle));
  segment = radius / tan;
  //Check the segment
  length1 = GetLength(dx1,dy1);
  length2 = GetLength(dx2,dy2);
  length = Math.min(length1,length2);
  if (segment > length) {
    segment = length;
    radius = length * tan;
  }
  // Points of intersection are calculated by the proportion between 
  // the coordinates of the vector,length of vector and the length of the segment.
  var p1Cross = GetProportionPoint(angularPoint,segment,length1,dx1,dy1);
  var p2Cross = GetProportionPoint(angularPoint,length2,dx2,dy2);
  // Calculation of the coordinates of the circle 
  // center by the addition of angular vectors.
  dx = angularPoint.x * 2 - p1Cross.x - p2Cross.x;
  dy = angularPoint.y * 2 - p1Cross.y - p2Cross.y;
  L = GetLength(dx,dy);
  d = GetLength(segment,radius);
  var circlePoint = GetProportionPoint(angularPoint,d,L,dx,dy);
  //StartAngle and EndAngle of arc
  var startAngle = Math.atan2(p1Cross.y - circlePoint.y,p1Cross.x - circlePoint.x);
  var endAngle = Math.atan2(p2Cross.y - circlePoint.y,p2Cross.x - circlePoint.x);
  //Sweep angle
  var sweepAngle = endAngle - startAngle;
  //Some additional checks
  if (sweepAngle < 0) {
    startAngle = endAngle;
    sweepAngle = -sweepAngle;
  }
  if (sweepAngle > Math.PI)
    sweepAngle = Math.PI - sweepAngle;
  ctx.lineWidth = 2;
  ctx.strokeStyle = '#000000';
  ctx.beginPath();
  ctx.moveTo(p1.x,p1.y);
  ctx.lineTo(p1Cross.x,p1Cross.y);
  ctx.moveTo(p2.x,p2.y);
  ctx.lineTo(p2Cross.x,p2Cross.y);
  ctx.lineWidth = this.linewidth;
  ctx.strokeStyle = this.color;
  ctx.stroke();
  var left = circlePoint.x - radius;
  var top = circlePoint.y - radius;
  var diameter = 2 * radius;
  var degreeFactor = Math.PI*subdivisions;
  /*
  ctx.beginPath();
  ctx.arc(left,top,diameter,(startAngle * degreeFactor),(endAngle*degreeFactor));
  ctx.strokeStyle = "#00FF00";
  ctx.stroke();
  ctx.strokeStyle = "#000000";
  */
  //To get points of arc you can use this:
  pointsCount = Math.abs(sweepAngle * degreeFactor);
  sign = Math.sign(sweepAngle);
  points = [];
// you can remove the Math.ceil**0.5 thing and just have it as pointsCount - 1 or something.
  for (i = 0; i < pointsCount + (Math.round(subdivisions) % 2 == 0 ? 1 : 0); i++) {
    var pointX = circlePoint.x + Math.cos(startAngle + ((i/pointsCount) * sign * 2)) * radius;
    var pointY = circlePoint.y + Math.sin(startAngle + ((i/pointsCount) * sign * 2)) * radius;
    points[i] = new Point(pointX,pointY);
    ctx.beginPath();
    ctx.arc(points[i].x,points[i].y,1,2 * Math.PI);
    ctx.fillStyle = "#00FF00";
    ctx.fill();
  }
}
function GetLength(dx,dy) {
  return Math.sqrt(dx * dx + dy * dy);
}
function GetProportionPoint(point,length,dy) {
  factor = segment / length;
  return new Point(point.x - dx * factor,point.y - dy * factor);
}

var p = new Point(50,75);
var p1 = new Point(200,25);
var p2 = new Point(225,250);

var dotRadius = 5;
function drawAll(radius,subdivisions) {
  ctx.clearRect(0,canvas.width,canvas.height);
  DrawRoundedCorner(p,subdivisions);
  ctx.font = '18px sans-serif';
  ctx.fillText('P',p.x - 20,p.y + 5);
  ctx.beginPath();
  ctx.arc(p.x,p.y,dotRadius,2 * Math.PI);
  ctx.fillStyle = "#00FF00";
  ctx.fill();
  ctx.fillStyle = "#000000";
  ctx.fillText('P1',p1.x + 10,p1.y + 6);
  ctx.beginPath();
  ctx.arc(p1.x,p1.y,2 * Math.PI);
  ctx.fill();
  ctx.beginPath();
  ctx.fillText('P2',p2.x + 10,p2.y + 6);
  ctx.arc(p2.x,p2.y,2 * Math.PI);
  ctx.fill();
}
let radiusValue = radius_slider.value;
let subdivsValue = subdivs_slider.value;
function handleSlider(){
  radiusValue = radius_slider.value;
  subdivsValue = subdivs_slider.value;
  drawAll(radiusValue,subdivsValue);
}
radius_slider.oninput = handleSlider;
subdivs_slider.oninput = handleSlider;
drawAll(radiusValue,subdivsValue);
body {
  text-align: center;
}

#canvas {
  width: 160px;
  height: 160px;
  border: 1px solid rgb(200,200,200);
}
<canvas id="canvas" width=160 height=160></canvas><br>
<label for="radius">Radius</label>
<input type="range" min="1" max="100" value="50" class="slider" id="radius">
<div>
<label for="subdivs">Subdivs</label>
<input type="range" min="1" max="16" value="2" class="slider" id="subdivs">
</div>

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

导入项目后报错问题
依赖报错 idea导入项目后依赖报错，解决方案：https://blog.csdn.net/weixin_42420249/article/details/81191861 依赖版本报错：更换其他版本 无法下载依赖可参考：https://blog.csdn.net/weixin_42628809/a
idea不能识别yaml文件
使用mybatis plus常见错误
错误1：代码生成器依赖和mybatis依赖冲突 启动项目时报错如下 2021-12-03 13:33:33.927 ERROR 7228 [ main] o.s.b.d.LoggingFailureAnalysisReporter : *************************** APPL
gradle常见问题与错误
错误1：gradle项目控制台输出为乱码 # 解决方案：https://blog.csdn.net/weixin_43501566/article/details/112482302 # 在gradle-wrapper.properties 添加以下内容 org.gradle.jvmargs=-Df
Mybatis Plus传入参数0不起作用
错误还原：在查询的过程中，传入的workType为0时，该条件不起作用 &lt;select id=&quot;xxx&quot;&gt; SELECT di.id, di.name, di.work_type, di.updated... &lt;where&gt; &lt;if test=&qu
linux中make编译源码包失败
报错如下，gcc版本太低 ^ server.c:5346:31: 错误：‘struct redisServer’没有名为‘server_cpulist’的成员 redisSetCpuAffinity(server.server_cpulist); ^ server.c: 在函数‘hasActiveC
微服务启动错误：Command line is too long. Shorten command line for
解决方案1 1、改项目中.idea/workspace.xml配置文件，增加dynamic.classpath参数 2、搜索PropertiesComponent，添加如下 &lt;property name=&quot;dynamic.classpath&quot; value=&quot;tru
vue常见错误
删除根组件app.vue中的默认代码后报错：Module Error (from ./node_modules/eslint-loader/index.js): 解决方案：关闭ESlint代码检测，在项目根目录创建vue.config.js，在文件中添加 module.exports = { lin
spark常见错误
查看spark默认的python版本 [root@master day27]# pyspark /home/software/spark-2.3.4-bin-hadoop2.7/conf/spark-env.sh: line 2: /usr/local/hadoop/bin/hadoop: No s
matplotlib报错：AttributeError: module 'backend_interagg' has no attribute 'FigureCanvas'. Did you mean: 'FigureCanvasAgg'?
使用本地python环境可以成功执行 import pandas as pd import matplotlib.pyplot as plt # 设置字体 plt.rcParams[&#39;font.sans-serif&#39;] = [&#39;SimHei&#39;] # 能正确显示负号 p
gitlab登录失败，报错：This challenge page was accidentally cached by an intermediary and is no longer available.
设置时间 控制面板
后端开发常见错误
错误1：Request method ‘DELETE‘ not supported 错误还原：controller层有一个接口，访问该接口时报错：Request method ‘DELETE‘ not supported 错误原因：没有接收到前端传入的参数，修改为如下 参考 错误2：cannot r
docker常见错误
错误1：启动docker镜像时报错：Error response from daemon: driver failed programming external connectivity on endpoint quirky_allen 解决方法：重启docker -&gt; systemctl r
idea常见错误
错误1：private field ‘xxx‘ is never assigned 按Altʾnter快捷键，选择第2项 参考：https://blog.csdn.net/shi_hong_fei_hei/article/details/88814070 错误2：启动时报错，不能找到主启动类 #
pip安装依赖失败
报错如下，通过源不能下载，最后警告pip需升级版本 Requirement already satisfied: pip in c:\users\ychen\appdata\local\programs\python\python310\lib\site-packages (22.0.4) Coll
maven常见错误
错误1：maven打包报错 错误还原：使用maven打包项目时报错如下 [ERROR] Failed to execute goal org.apache.maven.plugins:maven-resources-plugin:3.2.0:resources (default-resources)
cloud项目中常见错误
错误1：服务调用时报错 服务消费者模块assess通过openFeign调用服务提供者模块hires 如下为服务提供者模块hires的控制层接口 @RestController @RequestMapping(&quot;/hires&quot;) public class FeignControl
springboot常见错误
错误1：运行项目后报如下错误 解决方案 报错2：Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.8.1:compile (default-compile) on project sb 解决方案：在pom.
springmvc拦截器中使用redisTemplate报空指针异常
参考 错误原因 过滤器或拦截器在生效时，redisTemplate还没有注入 解决方案：在注入容器时就生效 @Component //项目运行时就注入Spring容器 public class RedisBean { @Resource private RedisTemplate&lt;String
vite报错：npm ERR! command C:WINDOWSsystem32cmd.exe /d /s /c C:UsersychenAppDataLocalTempnpx-dde1c848.cmd
使用vite构建项目报错 C:\Users\ychen\work&gt;npm init @vitejs/app @vitejs/create-app is deprecated, use npm init vite instead C:\Users\ychen\AppData\Local\npm-
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot