根据光标移动方向旋转图片
根据光标移动方向旋转图片
提问于 2019-04-29 00:37:32
我正在试着根据光标移动的方向旋转图片。下面是我为tring编写的一些代码：
<head>
<meta charset="UTF-8">
<script language="javascript" type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
<!-- uncomment lines below to include extra p5 libraries -->
<!--<script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js"></script>-->
<!--<script language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.sound.min.js"></script>-->
<script language="javascript" type="text/javascript" src="asd.js"></script>
</head>
<body>
</body>
</html>我的Javascript文件如下：
function preload() {
arrowImg = loadImage("fish.png");
}
// Creating canvas
function setup() {
createCanvas(600, 300);
background(255);
noCursor();
}
// Displaying the functions above
function draw() {
background(255);
imageMode(CENTER);
image(arrowImg, mouseX, mouseY, arrowImg.width / 10, arrowImg.height / 10);
}
如何获取处理过程中光标或鼠标移动方向的属性/p5js，以及如何将图片旋转180度。
想法是:图像跟随光标。如果光标向右移动，图像将按原样显示。光标向左移动，图像旋转180度
回答 2
Stack Overflow用户
发布于 2019-04-29 00:53:42
我不太确定我已经理解了你的问题，但我认为你可以在绘制图像之前添加p5js中的rotate()函数。
关于相对于鼠标位置的旋转，你可以保存鼠标的坐标，并用笛卡尔坐标做一些简单的数学运算来计算你需要的角度。
Stack Overflow用户
发布于 2019-11-26 15:55:45
我也有同样的问题。经过几个小时的研究，我发现是这样的：
let fish;
function preload() {
fish = loadImage('images/fish.png');
}
function setup() {
createCanvas(600, 600);
}
function draw() {
background(0);
var imgx = 300;
var imgy = 300;
var angle = atan2(mouseY - imgy, mouseX - imgx);
push();
translate(imgx, imgy);
rotate(angle);
imageMode(CENTER);
image(fish, 0, 0, 80, 50)
pop();
}这里的关键点是imageMode(CENTER);
translate(imgx, imgy);
rotate(angle);
imageMode(CENTER);希望能有所帮助。谢谢
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55892390
复制相关文章
相似问题