Question

我正在制作我的第一个画布项目，它需要一个美国的部分地图，点击时会有缩放和中心状态。

我能够找到X Y点数来绘制国家，每个州都是自己的数组。我需要绘制出比这些尺寸更大的状态，所以我引入了一个可变的比例来乘以每个点。

我的下一个挑战是客户只需要抽出13个州，但不能相互比较。（例如，将画布上的俄亥俄州和伊利诺伊州彼此相邻并忽略印第安纳州）。我的解决方案是为每个状态引入一个固定的X，Y“常量”，在缩放发生之后，为该状态添加X Y值并使其成为要绘制的点。

for ( var j = 0; j < state.myPolygons.length; ++j) {
    context.beginPath();
    context.lineWidth = lineWidth;
    context.strokeStyle = stateStroke;
    context.fillStyle = stateFill;
    for ( var k = 0; k < state.myPolygons[j].myXVals.length; ++k ) {
        var x = parseFloat(state.myPolygons[j].myXVals[k]*state.scale)+state.posX;
        var y = parseFloat(state.myPolygons[j].myYVals[k]*state.scale)+state.posY;
        y = canvas.height - y;
        if ( k == 0 ) 
            context.moveTo(x,y);
        else 
            context.lineTo(x,y);
    }
    context.closePath();
    context.fill();
    context.stroke();
}

通过定义目标比例和步数，可以实现点击状态，增长并以画布为中心的效果。我得到了目标尺度和当前尺度之间的差异，并将其除以步数来计算在每个“框架”中添加到状态尺度的程度。示例：俄亥俄州的初始比例是找到的坐标的1.97。我对俄亥俄州的目标是3.75％。我得到差异（1.78），并将其除以45（定义的一组步骤）来绘制。这给了我0.039作为每帧的比例增量。然后我循环，而我的状态当前比例小于目标比例。但是，由于我需要操作渲染的X Y，因此每个状态都有一个zoomx和zoomy常量，它被添加到计算的X Y中，因此它可以“滑动”到画布的中心。

所有这一切都很完美，我从左到右进行加州缩放/滑动，俄亥俄州从右向左滑动等等。这是我的问题。

我有一系列的点来表示州内的客户位置。这些是我绘制圆圈的简单X Y.地图的初始渲染包括遍历每个状态集位置的循环。我正在应用相同的比例因子和posX，posY变量来调整点相对于状态的最终渲染的最终位置

for (var loc in state.Locations) {
    var locx = parseFloat(state.Locations[loc].x*state.scale)+state.posX
    var locy =parseFloat(state.Locations[loc].y*state.scale)+state.posY;
    var txt=state.Locations[loc].text;
    var lnk=state.Locations[loc].link;
    context.beginPath();
    context.arc(locx,locy,locationSize,0,Math.PI*2,true);
    context.fillStyle = locationFill;
    context.closePath();
    context.fill();
    context.stroke();                           
}

然而，当状态变焦时，点的缩放逻辑失败。适用于给定框架的州规模

x = parseFloat(activeState.myPolygons[j].myXVals[k]*activeState.scale)+activeState.posX;
y = parseFloat(activeState.myPolygons[j].myYVals[k]*activeState.scale)+activeState.posY;

当我将其应用于状态为

的给定位置时

locx = parseFloat(activeState.Locations[loc].x*activeState.scale)+activeState.posX;
locy = parseFloat(activeState.Locations[loc].y*activeState.scale)+activeState.posY;

我非常接近X，但在俄亥俄州的例子中，Y在佛罗里达附近。像加利福尼亚这样的其他州甚至更糟糕，他们的点开始更多地“叠加”在彼此之上，并最终在彼此旁边“散开”。

我正在试图找出在相对于当前状态尺度的位置上增大和缩小XY位置所需的触发功能，并将其保持在状态通过动画（放大和缩小）。

我来到这里之前的最后一次尝试是获取该位置的初始X Y，并将其距离与状态数组的最后X Y进行比较。我试图找到连接这两个点的线的角度，然后使用所有这些来缩放。我仍然觉得我可能会采用这种方法，但我无法实现。

感谢大家花时间阅读本文，我赞赏你能提供的任何帮助

Answer 1

你可以看看我放在桌子上的那张纸，上面写着那张纸。但是，SVG对于项目来说会更加优化，因为您可以使用g标签轻松地将事物组合在一起，然后可以扩展整个组。

但是，由于此时你不得不使用画布：你必须使用trig给定向上和向下缩放，给定起点到位置点的角度以及从原来的左右移动的差异距离。当你允许我给那张纸回来时，我会用实际的方程更详细地解释。但是，此时您真正需要修改的唯一一行是：

locy = parseFloat(activeState.Locations[loc].y*activeState.scale)+activeState.posY;

按百分比在HTML5画布上缩放点的X Y.

1 个答案: