代码之家 › 专栏 › 技术社区 › Newbie_Coder

如何使用Jquery无画布裁剪框架

sprite-sheet crop jquery html

Newbie_Coder · 技术社区 · 9 月前

我需要做一个国际象棋骑士(我正在做一个新项目)。我有一张所有作品的精灵表,但我正努力只使用一个。我需要一块130像素乘130像素的正方形。我之所以选择骑士,是因为为什么不呢(不一定要举例说明)。 This 是我正在使用的精灵表。我尝试了一个jQuery脚本附加一个新的图像,然后我尝试调整大小和其他东西,但没有成功。然后我做了一个 <div> 并调整了大小,但我无法使用jQuery使背景图像成为国际象棋精灵。该代码是:

$('.pieces > .white').append('<div class="white wKnight wK' + wK + '" style="width: 130px; height: 130px"></div>');
$('.wK' + wK).css('background-image', ChessSprites.png)

Html:

<div class="pieces">
  <div class="white"></div>
  <div class="black"></div>
</div>

wK 代表 whiteKnight 它从一开始,为每一个骑士计数,所以每个骑士都可以单独调用。我知道可能还有更好的方法,但我仍在学习,这就是我所理解的。我不想用画布,因为那样会非常过分和困难。

1 回复 | 直到 9 月前

Musa 9 月前

要将元素的背景设置为图像的任意部分,可以使用 background-position css样式。

$('.pieces > .white').append('<div class="white wKnight wK" style="width: 130px; height: 130px"></div>');
$('.wK').css({'background-image': 'url(https://i.stack.imgur.com/2OXx4.png)', 'background-position': '390px 0px'});
$('.pieces > .black').append('<div class="black bKnight bK" style="width: 130px; height: 130px"></div>');
$('.bK').css({'background-image': 'url(https://i.stack.imgur.com/2OXx4.png)', 'background-position': '390px 130px'})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pieces">
  <div class="white"></div>
  <div class="black"></div>
</div>