CreateJS - 益智游戏

Question

我正在尝试构建一个益智游戏，我可以在其中动态更改游戏中使用的图像。我使用 illustrator 的 drawscript 插件创建了各种拼图形状，这很棒。 .p() 中的长代码包含有关矢量形状以及 x 和 y 位置的所有信息。 beginBitmapFill() 函数然后创建包含图像中该形状信息的形状。缺点是注册点是 0,0，这意味着拖动拼图时总是有偏移量。看看我的小提琴，看看我的意思。我已经注释掉了 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 是一个对象，它以形状的name 为键（例如：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/