×

深圳网站建设—APP开发—网站制作—小程序开发_博纳网络公司

0755 -
82538016
82560826
网站制作资讯

APP开发公司程序详解怎样解决Paper.js图形库?

文章编辑:网站建设 文章来源:APP开发 浏览量:

  APP开发公司程序详解怎样解决Paper.js图形库?深圳APP开发公司资深程序员,结合多年APP开发工作,在本文就Paper.js的应用与各位进行分享,Paper.js是一个开源的矢量图形脚本框架,基于HTML5Canvas开发,提供了清晰的场景图和文档对象模型,还有许多强大的功能用来创建和使用矢量图形和贝塞尔曲线,接口设计精巧、规范并且干净。
  Paper.js的中文教程目前还很少,所以使用者需要前往官网http://paperjs.org的英文版教程
教程学习使用,这对一般的使用者是一个挑战,不过作为一名合格的前端工作者,习惯阅读外文站点也是工作的一部分。下面通过一个示例了解使用Paper.js,开发使用Canvas的图形绘制应用。
【代码6-3】
01 <! DOCTYPE html> 02 < html> 03 < head> 04 < script type=" text/ javascript" src=" paper. js"></ script>
<!-- 引入 paper. js --> 05 < script type=" text/ paperscript" canvas=" canvas"> <!-- 执行 脚本 块 --> 06 function onMouseDrag( event) { // 鼠标 拖动 事件 07 var path = new Path. Circle({ // 新建 一个 圆形 路径 实例 08 center: event. downPoint, // 设置 中心点 坐标 09 radius: (event. downPoint - event. point). length, // 设置 圆形 半径 10 fillColor: 'white', // 设置 填充 颜色 11 strokeColor: 'black' // 设置 边框 颜色 12 }); 13 }; 14 </ script> 15 </ head> 16 < body> 17 < canvas id=" canvas" resize></ canvas> // 画布 元素 18 </ body> 19 </ html>
点击页面某个区域,按住鼠标进行拖动,将会以点击点为圆心、拖动距离为半径画圆,松开鼠标后圆形绘制完毕。图6.5为测试后绘制的效果图。
  深圳APP开发公司提示Paper.js项目同时还被发布在GitHub上,了解开发者最新发布动态可以前往GitHub,项目地址:
为https://github.com/paperjs/paper.js。好了,APP开发公司本文关于“
APP开发公司程序详解怎样解决Paper.js图形库?”的相关知识就分享到这里,谢谢关注,博纳网络编辑整理。
 

当前文章链接:/construction/appkaifa/3283.html
如果您觉得案例还不错请帮忙分享:

[声明]本网转载网络媒体稿件是为了传播更多的信息,此类稿件不代表本网观点,本网不承担此类稿件侵权行为的连带责任。故此,如果您发现本网站的内容侵犯了您的版权,请您的相关内容发至此邮箱【qin@198bona.com 】,我们在确认后,会立即删除,保证您的版权。