javascript - JavaScript - 旋转基于 SVG 的线的角度
问题描述
我在 Canvas 上画线,并希望根据它的位置在线合并 svg 图像。如何找到画线起点和终点之间的角度?
编辑
此函数用于获取线的角度
public angleOfWall(p1,p2){
var angleDeg = Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;
return angleDeg;
}
var angleOfWall = this.angleOfWall(closestWall.getStart(), closestWall.getEnd());
找到角度后,我想将 img 合并到它上面。
for (let i = 0; i < this.model.floorplan.items.length; i++) {
item = this.model.floorplan.items[i];
var hover = item===this.viewmodel.activeItem;
var itemWidth = item.width|32;
var itemHeight = item.height|32;
if (!item.el) {
item.el = document.createElement('img');
// draw door line on that position
item.el.src = this.model.floorplan.items[i].model_url_2d;
item.el.onload = (( /** image **/ ) => {
this.context.drawImage(item.el,
this.viewmodel.convertX(item.xpos * item.scale_x) - itemWidth/2.,
this.viewmodel.convertY(item.zpos * item.scale_z) - itemHeight/2.,
itemWidth, itemHeight);
} .("model_url2d" 是 SVG 图像的 url )
private rotateSVG(rotateSVG) {
var innerArrow = document.getElementById("#add-items");
innerArrow.setAttribute("transform", rotateSVG);
}
跟随线旋转位置是否正确?只是我是 JS 方面的新手,所以需要一些帮助。谢谢
这里我现在有什么 但想将img角度旋转为线的角度
解决方案
重要提示:此答案解决了修订版 1 的问题这是我回答的问题的内容:
“我在 Canvas 上画线,想根据它的位置在线合并 svg 图像。我怎样才能找到画线起点和终点之间的角度? ”
给定 2 个点 p1 和 p2,您可以使用atan2方法计算从 p1 到 p2 绘制的线的起点和终点之间的角度。
如果您将线视为斜边并将 x (dx) 和 y (dy) 中的距离视为catheti,您可以写let angle = Math.atan2(dy, dx);
:这将为您提供以弧度为单位的角度。如果您需要以度为单位的角度,则必须:let angleInDegrees = angle*180/Math.PI
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
let cw = canvas.width = 300,
cx = cw / 2;
let ch = canvas.height = 300,
cy = ch / 2;
// given 2 points: p1 and p2
let p1 = {x:50, y:200},
p2= {x:200, y:50}
ctx.beginPath();
ctx.moveTo(p1.x, p1.y);
ctx.lineTo(p2.x, p2.y);
ctx.stroke();
//the distance in x & y between the 2 points
let dx = p2.x - p1.x;
let dy = p2.y - p1.y;
// the angle in radians
let angle = Math.atan2(dy, dx);
// the angle in degrees
console.log(angle*180/Math.PI)
canvas{border:1px solid #d9d9d9;}
<canvas></canvas>
我希望这有帮助。
推荐阅读
- java - java 1.8 jar 在 Windows 而非 Ubuntu 中运行,“找不到或加载主类...”
- xamarin - XF 4.6 pre 是否需要设置“CarouselView_Experimental”、“SwipeView_Experimental”、“IndicatorView_Experimental”?
- javascript - css和html的导航栏问题
- flutter - Flutter:解析 JSON 数据并在 App 中展示
- java - 如何使用 terser 从 hl7 v2.6 消息中获取特定字段的各种组件?
- python - 使用 scrapy 抓取简单网站时出现 503 Service Unavailable 错误
- php - Laravel 静态 Create 方法插入记录返回 null id
- linux - 可以将当前日期添加到 rsync 工作路径吗?
- docker - elasticbeanstalk 部署失败,来自守护进程的错误响应:
- python - 在 Python/tkinter 中,检测是否使用 SSH 的最佳方法是什么,因此 Windows 不可用?