javascript - CreateJS - 益智游戏

Question

我正在尝试构建一个益智游戏，我可以动态更改游戏中使用的图像。我使用插画师的绘图插件创建了各种拼图形状，这很棒。 .p() 中的长代码包含有关向量形状以及 x 和 y 位置的所有信息。 beginBitmapFill() 函数然后创建包含该形状的图像信息的形状。缺点是注册点是 0,0，这意味着拖动拼图 block 时总是存在偏移。看看我的 fiddle 就明白我的意思了。我已注释掉 beginBitmapFill 行，但取消注释以查看其实际效果。有人对如何做到这一点有任何想法吗？

g = new createjs.Graphics();
s = new createjs.Shape(g);
s.graphics.beginBitmapFill(image).s().p("AAAAAYEEAAEEAAEEAAYAAAAhGDIBGA8YAyA8CChuAyAyYA8A8AAB4g8A8YgyAyiChugyA8YhGA8BGDSAAAAYAAAAjSA8g8g8Yg8g8Buh4gyg8Yg8gyh4AAg8AyYgyA8BuB4g8A8Yg8A8jSg8AAAAYAAkEAAkEAAj6");
s.name = key;
container.addChild(s);

http://jsfiddle.net/non_tech_guy/1yyn4904/

Answer 1

问题来自于形状位置。形状被绘制在预定义的位置，并且它们的大小都是310px。因此，当您将鼠标事件位置分配给目标对象时，它会变得远离指针。

为了使其适用于当前的实现，我为每个形状创建了一个位置引用。

positionReference = {};
SHAPE_SIZE=310;
var yRelCount = 1;

for(var i = 1; i< 17;i++) {
    xRel = i % 4 || 4;
    yRel = yRelCount;
    if (xRel === 4) {
      yRelCount++;   
    }
    positionReference['p'+i] = {
        x: xRel * SHAPE_SIZE / 4,
        y: yRel * SHAPE_SIZE / 4
    }
}

positionReference 是一个以形状的名称为键的对象(例如:p1、p2、p3...)以及位置 x 和 y作为值。

稍后在拖动事件中，利用位置引用，使形状粘在鼠标指针上

function pressMove(evt){
    console.log('move')
    var target = evt.target;
    var ref = positionReference[target.name];
    target.x= stage.mouseX-ref.x+(SHAPE_SIZE/8);
    target.y= stage.mouseY-ref.y+(SHAPE_SIZE/8);
}

你可能会发现我还添加了SHAPE_SIZE/8，这样做的目的是调整位置，使鼠标指针出现在形状的中间。

工作示例:http://jsfiddle.net/1yyn4904/1/