我尝试开发矢量绘图的交互式查看器,并希望具有缩放功能。 缩放功能非常好,但现在我有问题来计算拾取对象的鼠标位置。 该事件返回屏幕坐标。 画布没有以反向方式使用变换矩阵的方法。 有没有人有这个问题的解决方案?

===============>>#1 票数:3

我做了一个非常小的简单类来跟踪转换矩阵。

我添加了一个invert()函数,原因是这样的。 我也做了一个invertPoint()函数,但没有把它放在最终版本中。 然而,推断它并不难,只需将点反转并转换为点。

我经常只使用这个类来计算适当的变换,然后使用setTransform ,具体取决于应用程序。

我希望我能给你一个更具体的解决方案,但没有你想要的代码样本那么难做。

这是转换类代码。 这是一篇博文,附有一些解释。

===============>>#2 票数:-1

以下是库的一些有价值的函数,它们可以保留矩阵状态,并且需要构建场景图:

Transform.prototype.reset = function() {
  this.m = [1,0,0,1,0,0];
  this.stack = [];
};

Transform.prototype.push = function() {
    this.stack.push(this.m.slice());
};

Transform.prototype.pop = function() {
    this.m = this.stack.pop();
};

  ask by strangeoptics translate from so

未解决问题?本站智能推荐:

1回复

Android:在不同坐标系中进行画布缩放

我有点绝望了=)... 我正在Android的画布上绘制点和线。 我要显示的点应在数学系统中显示。 所以我做了canvas.getHeight()-point.y以正确的方式显示点。 但是,如果我想放大绘制的对象,则y坐标会从我的视图中缩小。 那是因为x = 10且y =700
1回复

canvas.scale之后的位图坐标

在触摸画布时,我需要帮助以获取正确的坐标。 我的图片是1240x1756 用户可以在该位图上滚动。 它是附加到画布的位图。 我通过翻译画布来做到这一点。 canvas.translate() 用户还可以放置新的位图并将其移动到画布上的任何位置。 最高256x256。
1回复

在预设位置在html5画布上缩放照片图像

一段时间以来,我一直在努力解决这个问题,希望有人能够帮助我解决这个问题。 我在html代码中添加了canvas对象,在其中加载了照片图像。 我正在尝试在一些随机坐标上缩放图像,但是缩放仅发生在画布的中心。 如果使用平移,则整个图像会随着原点的变化而移动。 我也尝试过转换,但是也无法达
1回复

HTML5 Canvas将对象移动到鼠标单击位置

基本上我想将一个对象从A点(10x,10y)移动到画布上单击鼠标的位置(255x,34y)。 我目前正在使用一种方法,但它从++ X然后是++ Y到坐标; 然后是正确的。 我希望它直接进入位置,喜欢路径上的动画。 从A点到B点减速。
1回复

HTML5 Canvas上传的带有按钮编码的图像缩放/缩放

我对此很不满意,并试图创建2层。 我的顶层是固定图像,底层是上传的图像。 我希望能够操纵底部的图像。 我有一个代码 http://www.html5canvastutorials.com/labs/html5-canvas-scaling-a-drawing-with-plus-an
2回复

缩放HTML5画布图像

构建一个网页,在该网页上我试图将图像设置为主画布的背景。 实际的图像是1600x805,我正在尝试对应用程序进行编码,以便它可以根据用户屏幕的尺寸向上或向下缩放图像。 在Prime.js我有一个对象,用于设置位于index.html中的应用程序canvas元素的属性。 这是该对象的代码:
2回复

HTML5画布,绘制后缩放图像

我正在尝试缩放已经绘制到画布中的图像。 这是代码: 我应该怎么做?
1回复

HTML5画布比例计算

我正在为游戏引擎开发关卡编辑器,我希望能够放大/缩小。 所以我尝试了ctx.scale(1.1, 1.1)但是我不知道如何再次扩展它。 我尝试了ctx.scale(0.9, 0.9)但我认为这是不正确的。 我在堆栈溢出上尝试了谷歌以及其他问题,没有任何帮助。 提前致谢。
2回复

缩放文本以填充HTML5画布的最佳方法

我需要'缩放'文本来填充反HTML5画布。 似乎scale()方法不会影响文本。 我已经在measureText()方法上看到了迭代循环的近似方法,但这并没有让我得到我需要的东西。 理想情况下,我想在不保留纵横比的情况下水平和垂直填充。 SVG可能会帮助解决这个问题吗?
1回复

如何缩放HTML5画布以显示Google地图坐标

我有HTML5画布: 这很容易画线,但是线必须是(x-> max 500,y-> max400),就可以了。 但是我如何缩放此画布以显示坐标(纬度,经度)-坐标是高精度的十进制值: { “LAT”: “52.67554942424349”, “LNG”: “8