Question

我正在根据光标移动的方向旋转图片。这是我为tring写的一些代码：

const staffRef = db.collection("staff").where("employerId", "==", uid)
    const batch = db.batch()

    return staffRef.get()
        .then((querySnapshot) => {
            querySnapshot.forEach((doc) => {
                batch.update(doc.ref, { employerProfile: employerProfile })
            })...

我的Javascript文件如下：

    <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>

如何在process / 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>

Answer 3

我有同样的问题。经过几个小时的研究，我发现了这种方式：

    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);

希望对您有所帮助。谢谢

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

3 个答案: