CreateJS

Question

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

CreateJS - 益智游戏

CreateJS - Puzzle Game

javascript