javascript - 从Spritesheet定义dynamicjs rect背景

给定我有一个40x40px的dynamicjs rect，例如，我也有一个200x200的spritesheet，其中包含25个40x40的sprite，我想给dynamicjs rect一个单独的sprite的背景。我该怎么做呢？

最佳答案

您可以定义一个自定义Kinetic.Shape以显示修剪的精灵。

Kinetic.Shape为您提供了一个包装的画布上下文，可以在其上进行绘制，就像在本机画布上绘制一样。包装的画布上下文具有本机画布上下文的大多数（但不是全部）功能。

可以使用context.drawImage的剪切版本从spritesheet图像对象中剪切一个sprite并将其绘制到自定义形状上。

然后使用context.rect在包含剪切的精灵的Kinetic.Shape周围绘制描边边框。

这是示例代码和演示：

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 350,
        height: 350
    });
    var layer = new Kinetic.Layer();
    stage.add(layer);

    // ??? Fix very wierd glitch!
    // The Kinetic.Shape is not cleared if it's the only element on the canvas
    layer.add(new Kinetic.Circle({x:-300,y:250,radius:25,fill:'red'}));
    layer.draw();

var spriteRect;
var sw=471/5;
var sh=255/2;

var spritesheet=new Image();
spritesheet.crossOrigin='anonymous';
spritesheet.onload=start;
spritesheet.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/avatars.png";
function start(){

    spriteRect = new Kinetic.Shape({
        x: 20,
        y: 30,
        stroke:'black',
        strokeWidth:3,
        draggable:true,
        drawFunc: function(ctx) {
          // clip a sprite from the spritesheet and draw it on spriteRect
          ctx.drawImage(spritesheet, sw*1,0,sw,sh, 0,0,sw,sh);
          // draw a stroked border around the image
          ctx.rect(0,0,sw,sh);
          // tell KineticJS to draw the image + border on the layer
          ctx.fillStrokeShape(this);
        }
    });
    layer.add(spriteRect);
    layer.draw();


}

body{padding:20px;}
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:350px;
  height:350px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/kineticjs/5.2.0/kinetic.min.js"></script>
<h4>A draggable sprite-rect.</h4>
<div id="container"></div>
<h4>The spritesheet image</h4>
<img cross-origin=anonymous src='https://dl.dropboxusercontent.com/u/139992952/stackoverflow/avatars.png'>

顺便说一句，KineticJS已退休，但是Stackoverflow成员@lavrton以KonvaJS的形式分叉KineticJS：http://konvajs.github.io/。我可以热情地推荐KonvaJS！

关于javascript - 从Spritesheet定义dynamicjs rect背景，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/30220228/