HTML5画布绘制线在标尺

请访问下面的jsfiddle： - http://jsfiddle.net/mayanknimje87/GfaZ2/3/HTML5画布绘制线在标尺

有一把尺子和铅笔。直线时，我可以画直线。但是，当我旋转的比例，线的绘制将无法正常工作。另外，我想给用户提供动画，当用户将铅笔放在标尺上时（限制在标尺的上部而不是底部或中间），它开始绘制线条和动画。防爆。如果用户将铅笔放在尺子标记15上，则它应该动画并从15画线到0。用户也可以在铅笔触及标尺顶部而不是中间和底部时画线。请帮助我。学习会很好。提前致谢。

来源

2011-12-07 Mayank Nimje

有一些我发现动画使用css3-webkit-animation-timing-function：ease-in-out; 但不要如何使用它。 –

为了将画布像素绘制在这些图像元素之上，您必须将画布放在顶部。但是，画布会吸收鼠标事件。

不过，我认为你应该这样做，然后在画布上捕捉鼠标事件并处理拖动。

来源

2011-12-07 21:18:25

我也一样，请你检查一下jsfiddle。只有当直尺时，直线才会被绘制在直尺上。当我旋转标尺时，铅笔不会画线。 –

我看不到那种行为。我看到画布背后的图像，我证实了在webkit检查。我拖动铅笔而不触摸标尺。这条线是在统治者下画的。我在Windows 7上使用Chrome 15.0.874.121 m。 –

但是，我确实看到如果首先旋转标尺，然后拖动铅笔不会产生一条线。我认为这与您使用可拖动/可拖拽，我不熟悉。也许你应该尝试处理mousemove中的铅笔拖动，就像你处理标尺旋转一样。 –

HTML5画布绘制线在标尺

回答

相关问题