如何获取Javascript中图像的中心?

卡门兹

我正在创建一个要在其中移动对象的家伙,每个对象都附有一个图像,但是我不知道如何从中心而不是从左上角移动它们。

这是玩家:

function Player() {
    this.height = 167.5;
    this.width = 100;
    this.pos_x = 350;
    this.pos_y = 425;
    this.player_image = new Image();
    this.player_image.src = 'img/player_car_img.png';
};

及其方法“移动”:

Player.prototype.move = function(){
    if (37 in keysDown) {
        this.pos_x -= 10;
    }  else if (39 in keysDown) {
        this.pos_x += 10;
    }
};
星展银行

我不知道您要在何处绘制此图像,但是我会使用已经拥有的内容,只是将图像绘制在不同的位置。

您可以通过从初始位置取一半图像尺寸来围绕位置绘制图像(使用Player.pos_xPlayer.pos_y作为中心点,而不是左上角),如下所示:

Y = Y location - (image height / 2)
X = X location - (image width / 2)

在实际代码中,这看起来像:

var x = Player.pos_x - Player.player_image.width/2;
var y = Player.pos_y - Player.player_image.height/2;
ctx.drawImage(Player.player_image, x, y); 

这样,您Player.pos_x和会Player.pos_y保持在同一位置,但是图像将在该中心“周围”绘制。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何获取Javascript中图像的中心?

来自分类Dev

如何使用OpenCV仅获取图像中的中心对象?

来自分类Dev

在Matlab中获取图像的中心像素

来自分类Dev

如何从javascript中的URL获取图像名称

来自分类Dev

如何在图像滑块javascript中获取当前图像的引用?

来自分类Dev

如何在图像中定位亮点的中心?

来自分类Dev

如何在pyautogui中单击图像中心

来自分类Dev

如何在Javascript中获取图像颜色模式(CMYK,RGB ...)

来自分类Dev

如何在javascript中onclick随机获取图像对?

来自分类Dev

在Javascript中获取图像的大小

来自分类Dev

方柱中的中心图像

来自分类Dev

ul 中的中心图像

来自分类Dev

如何从JavaScript中从导轨加载的图像中获取原始图像尺寸?

来自分类Dev

如何从卷曲中获取图像

来自分类Dev

如何从图库中获取图像

来自分类Dev

如何从矩形中获取图像?

来自分类Dev

如何从图库中获取图像

来自分类Dev

如何在iOS中裁剪大图像的中心部分?

来自分类Dev

如何在matlab中围绕对象中心旋转图像?

来自分类Dev

您如何找到图像的中心?

来自分类Dev

如何文本对齐图像的中心?

来自分类Dev

如何从cgpoints数组中获取中心点?

来自分类Dev

如何在javafx中获取路径中心的坐标?

来自分类Dev

如何在Excel中获取列的中心值

来自分类Dev

导航栏中的中心图像

来自分类Dev

方形按钮中的中心图像

来自分类Dev

Javascript:如何获取图像URL的宽度

来自分类Dev

如何通过URL获取图像?(JavaScript)

来自分类Dev

如何使用流星/ javascript从URL获取图像