Zoom sur le canevas HTML5 sur le curseur de la souris

La toile est toujours à l'échelle de l'origine actuelle. L'origine par défaut est [0,0]. Si vous souhaitez zoomer depuis un autre point, vous pouvez d'abord faire ctx.translate(desiredX,desiredY); Cela réinitialisera l'origine du canevas à [desiredX,desiredY]. La méthode

translate() remappera la position (0,0) sur le canevas. La méthode scale() agrandit ou réduit le graphique actuel. Si vous souhaitez effectuer un panoramique() sur le contexte du canevas selon un décalage, vous devez d'abord le scale() pour effectuer un zoom avant ou arrière, puis un panoramique() selon la position opposée du décalage de la souris.

Ces exemples suivants donnent les étapes

ctx.translate(pt.x,pt.y);
ctx.scale(factor,factor);
ctx.translate(-pt.x,-pt.y);

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!