根据光标移动方向旋转图片

Question

我试图根据光标移动的方向旋转图片。这是一些代码，我为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度

Answer 1

我不太确定我是否理解了你的问题，但我认为你可以在绘制图像之前从p5js添加rotate（）函数。

关于相对于鼠标位置的旋转，您可以保存鼠标的坐标，并使用笛卡尔坐标进行一些简单的数学计算，以计算您需要的角度。

Answer 2

定义放置图像的位置并定义图像的宽度和高度：

let posX = width/2;
let posY = height/2;
let w = arrowImg.width / 10; 
let h = arrowImg.height/ 10;

从图像到鼠标位置的矢量角度（以弧度表示）可以通过Math.atan2计算：

let angle = Math.atan2(mouseY-posY, mouseX-posX);

图像可以由translate()放置并由rotate()旋转。旋转必须在平移之前完成，因此rotate必须在translate之后完成，因为像rotate和translate这样的操作定义矩阵并将当前变换矩阵乘以新的变换矩阵：

translate(posX, posY);
rotate(angle)
image(arrowImg, 0, 0, w, h);

请参阅示例，我将建议应用于问题的代码：

function preload() {
    arrowImg = loadImage("https://raw.githubusercontent.com/Rabbid76/graphics-snippets/master/resource/texture/fish256.png");
}

// Creating canvas
function setup() {
    createCanvas(600, 300);
    background(255);
    noCursor();
}

// Displaying the functions above
function draw() {
    background(0, 0, 255);
   
    let posX = width/2;
    let posY = height/2;
    let w = arrowImg.width /2; 
    let h = arrowImg.height / 2;
    
    let angle = Math.atan2(mouseY-posY, mouseX-posX);
    translate(posX, posY);
    rotate(angle)
    imageMode(CENTER);
    image(arrowImg, 0, 0, w, h);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.js"></script>

根据光标移动方向旋转图片

问题描述投票：1回答：2

2个回答

最新问题

根据光标移动方向旋转图片

问题描述 投票：1回答：2

2个回答

最新问题

问题描述投票：1回答：2