`
Ghost_Good
  • 浏览: 12398 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

原创开源SVG/VML在线画图插件使用教程

 
阅读更多
    前天发布了原创的SVG/VML在线画图插件,本想这么好的资源应该会有很多人关注,可惜人反而不多。不过还是在这里写下该插件的使用教程吧。

   
  • 引入在线画图插件的JS文件
  •    
    <script src="../script/coredraw/open.jquery.draw.core.js"></script>

       
  • 初始化插件
  •     在JavaScript中将要执行画图的元素如div进行插件初始化。
       
    var drawMain = $("#graph").draw();

       
  • 调用插件中的画图接口进行画图
  •    
    <a href="#" onclick="drawMain.line({'x': 50, 'y': 50}, {'x': 130, 'y': 130}, {'borderWidth': '2', 'borderColor': 'black'});">画直线</a>



        至于每个画图方法怎么应用,或参数的含义这里就不一一说明了,有兴趣的可以直接查看源代码,或留言,值得说明的是大部分画图接口的最后一个参数是设置画图元素的属性,你需要传递一个JS对象,可以包含borderWidth:设置画图元素的边框宽度,borderColor:设置画图元素的边框颜色,fillColor:设置画图元素的填充颜色。

        请大家支持Open JQueryhttp://www.openjquery.com,支持原创SVG/VML在线画图插件open.jquery.draw.core.js。

        原文:http://www.openjquery.com/html/19/n-19.html
    分享到:
    评论

    相关推荐

      http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd

      This is SVG, a language for describing two-dimensional graphics in XML. The Scalable Vector Graphics (SVG) Copyright 2001, 2002, 2011 World Wide Web Consortium (Massachusetts Institute of ...

      SVG、CANVAS、VML比较

      SVG、CANVAS、VML是三种用于在Web上创建矢量图形的方法,它们各有优缺点,适应不同的场景需求。 SVG(Scalable Vector Graphics)是一种基于XML的开放标准,被广泛支持,尤其在现代浏览器中,如Firefox和Opera。在...

      SVG画图插件raphaelJS

      RaphaelJS是一款强大的JavaScript库,专门用于在SVG(Scalable Vector Graphics)和VML(Vector Markup Language)格式下创建矢量图形。这个插件允许开发者在网页上绘制出复杂、交互式的图形,而且这些图形在任何...

      svg和vml实现的拓扑图

      3. **更新属性**:使用JS操作SVG或VML元素的属性,比如`stroke`(线条颜色)和`stroke-width`(线条宽度)。 在实际项目中,可以使用JavaScript库如D3.js,它提供了强大的数据绑定和可视化功能,简化了SVG的使用。...

      自动选择SVG和VML的WEB页面

      相似,可以满足大多数WEB二维图形应用的需求,但目前的情况是:VML只能在IE中使用,SVG被firefox,opera等浏览器的最新版本支持, 并且是W3C制定的开放标准,但目前IE不内置支持SVG,只能通过ADOBE的SVG插件显示。...

      vml网页画图经典教材

      本“vml网页画图经典教材”可能包含了关于如何使用VML在网页中创建、编辑和显示图形的详细教程。VML的主要优点在于它的矢量特性,这意味着图形可以无限放大而不失真,非常适合创建图表、图标、复杂的图形设计和动态...

      精品资源 / 炫酷特效 / svg / 漂亮 icons

      在IT行业中,SVG(Scalable Vector Graphics)是一种重要的图形格式,它被广泛...在使用这些SVG图标时,开发者应遵循开源许可协议,尊重作者的贡献,并考虑如何通过自己的创意和技能,将这些图标应用到更广阔的领域。

      SVG/CSS3镂空3D自行车骑行动画

      之前我们分享过一些基于CSS3和SVG的自行车动画,比如这款SVG/CSS3自行车 模拟自行车行驶动画和纯CSS3 3D自行车动画都非常炫酷。今天我们要给大家介绍另外一款基于SVG的3D镂空自行车骑行动画,与前面自行车动画不同的...

      Axialis IconGenerator 包含海量的ico/svg/xaml/png等图片资源

      Axialis IconGenerator 包含海量的ico/svg/xaml/png等图片资源

      VML语言学习画图,可以详细的学习

      &lt;/vml:shape&gt; &lt;/svg&gt; ``` 在这个例子中,`&lt;vml:shape&gt;`定义了一个形状,`&lt;vml:stroke&gt;`和`&lt;vml:fill&gt;`分别设置了边框颜色和填充颜色。 **VML图形元素:** VML支持多种图形元素,包括但不限于: 1. **线条(line)...

      SVG-web 画图

      这个SVG编辑器的实现可能涉及到JavaScript的SVG DOM操作,例如创建、修改SVG元素,以及使用jQuery的动画API来实现动态效果。同时,通过CSS,我们可以对编辑器的界面风格和SVG元素的样式进行自定义。 总之,SVG-web...

      SVG/HTML5动画图标 可用作图标菜单导航

      今天我们要给大家分享一款简易实用的SVG动画图标应用,这种动画图标现在越来越多地用于网页菜单导航,因为它使用起来简单,而且支持大部分浏览器。这款SVG/HTML5动画图标可以在鼠标滑过图标时产生简单的循环播放的...

      利用SVG或VML在网页上实现3D的曲面效果

      尽管SVG现在已经成为W3C的标准,但考虑到兼容性问题,有些开发者仍会使用VML。实现3D曲面效果时,VML同样需要通过一系列的矢量图形元素和属性,比如`&lt;shape&gt;`、`&lt;group&gt;`、`&lt;stroke&gt;`等,以及对应的样式属性。 然而...

      VML画图API

      这篇名为“VML画图API”的博文可能详细介绍了如何使用VML API来在网页中绘制图形。虽然具体的博文内容未给出,但我们可以根据VML的基本概念和常见用途来探讨一些相关的知识点。 1. **VML基本元素**:VML由一系列的...

      SVG画图工具,整套源码

      SVG画图工具是一种创新性的在线解决方案,它允许用户在网页浏览器中直接进行可缩放矢量图形(SVG)的设计和编辑。SVG作为一种矢量图像格式,具有无损放大、清晰度不变、文件小巧等优点,因此在网页设计、图标制作、...

      HTML5 svg炫酷波浪线条动画插件

      3. `jQuery之家.url`:这是一个快捷方式,可能指向一个关于jQuery的在线资源或教程网站。 4. `css` 文件夹:包含样式表文件,用于定义页面和动画的外观。可能有对SVG元素的样式定义,以及动画相关的过渡和关键帧动画...

      超简易的SVG/CSS3 Loading加载动画图标

      今天我们要为大家分享一组非常简易的SVG/CSS3 Loading加载动画图标,和之前分享的SVG实现的一组超华丽Loading加载动画相比,这组Loading动画更见简单,它主要由圆环形和柱形两种样式组成,可以将这些Loading图标应用...

      svg画图(汽车)

      svg画图,用画图工具画的svg格式的汽车,供大家参考

      QT画图插件库

      总结起来,QT画图插件库是QT框架的一个重要组成部分,它提供了一套完整的2D图形绘制解决方案,包括基本的图形绘制、插件扩展、交互式图形视图以及高级特性如SVG支持和OpenGL集成。借助这个库,开发者可以轻松地构建...

    Global site tag (gtag.js) - Google Analytics