织物画布中精灵图像的图像位置

时间:2017-10-16 06:01:25

标签: fabricjs

我无法将精灵图像的中心图像定位在布料画布中。当我使用剪辑功能时,图像尺寸变小。是否可以在背景网址中定位图像。

<!DOCTYPE html>
<html>
<head>
    <title>fabric</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.6.4/fabric.min.js"></script>
    <script src="/test/jquery-3.2.1.min.js"></script>
</head>
<body>
<canvas id="c" width="800" height="600"></canvas>
<script type="text/javascript">
var canvas = this.__canvas = new fabric.Canvas('c');
 fabric.Image.fromURL('/test/bike6x6_big.jpg', function(img) {
  canvas.add(img);
  },{
  width:480,
  height:327,
  top: 0 ,
  left: 0,
  clipTo:function(ctx){
    ctx.rect(0, 0 , 60, 60);
  }
});    
</script>
</body>
</html>

clipped image 预期产量: image onload 对于整个精灵图像,您可以访问spritespin.genie.au的spritesheet演示

0 个答案:

没有答案