0

我正在做一个项目，我想画一条角线，在线的末端我必须放一个角字符。但我不想使用画布，因为要求用户可以通过单击它来选择任何这些行。这可能无法通过 canvas 实现。给我一些建议。

实际上我想绘制下面的图像，也可以选择其中的一条或多条线。 在此处输入图像描述

4

4 回答 4

2

试试csstransform属性：http ://www.w3schools.com/cssref/css3_pr_transform.asp

于 2013-05-28T19:30:15.547 回答
0

这在画布上很容易实现，但我建议为此使用 SVG。你可以在这里找到一个非常好的 SVG 库http://raphaeljs.com/，或者你也可以使用一个画布库http://kineticjs.com/。

要使用画布自己完成此操作，您只需在一个事件中跟踪画布上的鼠标坐标，mousemove event然后click计算鼠标相对于您的线条的位置，如果鼠标点击在您的线条内，您有一个点击在线上。

在不提供任何代码或到目前为止您尝试过的任何东西的情况下，我无法详细说明，因为这是一个非常广泛和通用的问题，与任何一件事都没有真正的联系。

于 2013-05-28T19:09:57.970 回答
0

我会建议你使用jCanvas库。它将允许您将每一行作为单独的层进行操作，您还可以非常轻松地将鼠标和触摸事件附加到这些层。它非常容易学习和理解，因为它基于 jQuery，并且语法几乎与 jQuery 相似。

于 2013-05-30T12:31:54.620 回答
0

看看动画 CSS3 功能：http ://www.w3schools.com/css3/css3_animations.asp

 <!DOCTYPE html>
 <html>
 <head>
 <style> 
 div
 {
 width:100px;
 height:100px;
 background:red;
 position:relative;
 animation-name:mymove;
 animation-duration:5s;

 /* Safari and Chrome */
 -webkit-animation-name:mymove;
 -webkit-animation-duration:5s;
 }

 @keyframes mymove
 {
 from {transform: rotate(0deg);}
 to {transform: rotate(-90deg); }
 }

 @-webkit-keyframes mymove /* Safari and Chrome */
 {
 from {-webkit-transform: rotate(0deg);}
 to {-webkit-transform: rotate(-90deg); }
 }
 </style>
 </head>
 <body>

 <p><strong>Note:</strong> The animation-name property is not supported in Internet Explorer 9 and earlier versions.</p>

 <div></div>

 <p><b>Note:</b> Always specify the animation-duration property. Otherwise the duration      is 0, and the animation will not be played.</p>

 </body>
 </html>
于 2013-05-30T12:37:32.470 回答