HTML Canvas Zoom

时间:2015-07-20 13:30:27

标签: javascript html canvas

我想放大我的HTML画布并将缩放中心放在光标上,就像谷歌地图一样。我在这里找到了一些很棒的代码来完成这项工作。唯一的问题是,当使用比例尺时,我的物体线条的粗细度会增加,我不希望这种情况发生。我可以在不使用刻度或使用刻度的情况下进行缩放而不增加线条的厚度吗? 这是我用来缩放的代码:

canvas.onmousewheel = function (event){
var mousex = event.clientX - canvas.offsetLeft;
var mousey = event.clientY - canvas.offsetTop;
var wheel = event.wheelDelta/120;//n or -n


//according to Chris comment
var zoom = Math.pow(1 + Math.abs(wheel)/2 , wheel > 0 ? 1 : -1);

context.translate(
    originx,
    originy
);
context.scale(zoom,zoom);
context.translate(
    -( mousex / scale + originx - mousex / ( scale * zoom ) ),
    -( mousey / scale + originy - mousey / ( scale * zoom ) )
);

originx = ( mousex / scale + originx - mousex / ( scale * zoom ) );
originy = ( mousey / scale + originy - mousey / ( scale * zoom ) );
scale *= zoom;
}

0 个答案:

没有答案