如何更改画布原点的位置
我正在开发一个项目,允许用户绘制一些东西并将其保存在数据库中。
基本上,用户在画布上绘图,画布比屏幕尺寸大5倍,并且画布仍然位于屏幕的中心(或者屏幕位于画布的中心)。
为了使其对于画布大小能够灵活(以后想改变画布的大小),我们要设置画布的中心为Origin Point,即(0, 0)在画布的中心。因此,当鼠标单击某处时,我得到的点是根据画布的中心进行测量的。
也许你会说:
Canvas.RenderTransformOrigin = (.5,.5)
。但我不是在问旋转中心,所以这不是解决方案。Canvas.RenderTransform = TranslateTransform (Canvas.Width/2.0, Canvas.Height/2.0)
。但这只是将画布上的所有对象移动到中心。
您可能还会说,为什么我们不直接将 MouseClick 点平移一个偏移量 Canvas.Width/2.0, Canvas.Height/2.0
,然后在渲染时将它们平移回来。我们可以做到这一点,但是太费力了,因为我们还有很多其他操作要实现,所以每次我们都要来回翻译。
I'm working on a project that allows users to drawing something, and save it in the database.
Basically, the user draws on a canvas, the canvas is 5 time bigger than the screen size, and the canvas is still in the center of the screen (or the screen is in the center of the canvas).
In order to make it flexible for the canvas size (we want to change the size of the canvas in the future), we want to set the center of the canvas as the Origin Point, that is, (0, 0) is in the center of the canvas. So when the mouse clicks somewhere, the point I get is measured based on the center of the canvas.
Maybe you would say:
Canvas.RenderTransformOrigin = (.5,.5)
. But I'm not asking the rotating center, so it's not the solution.Canvas.RenderTransform = TranslateTransform (Canvas.Width/2.0, Canvas.Height/2.0)
. But this just move all the objects on the canvas to the center.
You may also say that, why don't we just translate the MouseClick points with an offset Canvas.Width/2.0, Canvas.Height/2.0
, and then translate them back when rendering. We could do that, but too much effort, because we have a lot of other operations to be implemented, so every time we have to translate back and forth.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
看来你已经想到了解决这个问题的几乎所有可能的方法,但是,我会看看是否可以再添加一个!
指定元素位置的
Canvas
属性、Left
和Top
是附加属性。您可以创建自己的附加属性,OffsetLeft
、OffsetTop
,它们允许您根据所需的原点定位元素。这些实现起来很简单,当获取/设置它们时,只需处理它们的更改事件即可设置相应的 Canvas 附加属性。It looks like you have thought of almost every possible approach to this problem, however, I will see if I can add just one more!
The
Canvas
properties,Left
andTop
, which dictate an elements position are attached properties. You could create your own attached properties,OffsetLeft
,OffsetTop
which allow you to position elements based on the origin you require. These would be simple to implement, when they are get / set, just handle their change event to set the respectiveCanvas
attached properties.