{
MessageBox.Show(e.Location.ToString())
}
引导理解:sender 鼠标事件调用者
其相应参数( 鼠标点击数鼠标点击位置)
保存MouseEventArgs e 面
字面意思看 Mouse --- 鼠标 Event --- 事件 Args --- 参数(复数)
e.Location() 获取鼠标位置要获取X坐标使用 e.X
var path = svgdoc.createElement("path")path.setAttribute("d","M400 400 L400 300 A400 400 90 0 1 500 400 Z")
path.setAttribute("style","fill:nonestroke:#00fstroke-width:2")
svgdoc.rootElement.appendChild(path)
这个代码是画四分之一个圆,圆环你自己算下坐标,用PATH画,A是画弧线的
path的相关知识,你百度你里面看下,这里就不多说了
看到网页上炫酷的图形轮廓线路径动画你是否会动心,想要自己来制作一个呢?其实这个特效实现起来并不难,使用轻量级HTML5插件jquery-drawsvg就可以实现了,jquery-drawsvg是一款轻量级的使用jQuery来绘制SVG图形轮廓线路径动画的插件。该插件使用jQuery内置的动画引擎来使SVG元素中path元素产生动画,其底层实现使用的是stroke-dasharray和stroke-dashoffset属性。该SVG路径动画插件的特点有:
轻量级,压缩后小于2kb
使用简单
支持Easing过渡动画效果
演示地址:http://www.htmleaf.com/Demo/201509112558.html
插件下载地址:http://down.htmleaf.com/1509/201509111546.zip
使用方法:
使用该SVG图形轮廓线路径动画插件需要引入jQuery和jquery.drawsvg.js文件。
<script src="js/jquery.min.js"></script>
<script src="js/jquery.drawsvg.js"></script>
初始化插件
在页面DOM元素加载完毕之后,可以通过下面的方法来使SVG图形生成轮廓线动画效果。
首先将初始化的对象实例保存为一个变量:
var mySVG = $('#my_svg_element').drawsvg()
然后就可以执行动画效果了:
mySVG.drawsvg('animate')
配置参数
下面是该SVG路径动画创建的可用配置参数:
参数类型默认值描述durationInteger1000完成每一个路径动画的持续时间staggerInteger200每一个路径动画开始前的延迟时间easingStringswing使用jQuery
Easing插件的过渡动画效果reverseBooleanfalse是否反向绘制callbackFunctionfunction()
{}路径动画完成之后的回调函数