社区导航

 
查看: 789|回复: 19

[原创] 用代码生成EE Logo

[复制链接]

5440

TA的帖子

185

TA的资源

版主

Rank: 6Rank: 6

发表于 2018-10-21 19:13:20 | 显示全部楼层 |阅读模式
本帖最后由 lcofjp 于 2018-10-21 19:17 编辑

闲着无聊(其实是忙里抽闲),打算用代码生成高清无码的EEWORLD LOGO,以备不时之需。当然这个logo是我制作的仿制品,不能用来代替正规EEWORLD的logo,与正品之间比较存在一定的瑕疵。
标题中所说的代码,是指JavaScript代码,JavaScript简称js。
js是近年来非常流行的编程语言,语言发展迅速,开源项目数量庞大,霸占着GitHub第一名的位置。
今天所说的用代码生成eeworld logo,也是借助于一个开源项目来完成,它就是:paper.js
通过paper.js,只需少量的代码就能完成在浏览器中绘制图形的工作。

与paper.js类似的还有p5.js, p5.js大家可能也没听过,不过Arduino大家肯定熟悉,Arduino的灵感来自于processing语言,软件界的Processing就是硬件界的Arduino,Processing基于java平台,他的诞生是为了解决非计算机专业人员也可以通过简单编程进行艺术创作,随着时间推移,processing项目又分支出了运行于JavaScript环境的p5.js和运行于Python环境的processing.py。

言归正传,用paper.js(PaperScript)来实现绘制EE logo非常简单,只要绘制出几个形状就完成了(绘制到哪里?在HTML5中有一个专门用于绘制自定义图形的元素Canvas,可以在这个canvas元素上进行2d或者3d绘图)。
1. 首先绘制logo的背景,logo的背景是一个黑色圆角矩形,带一个红色的投影。因为我没发现paper.js支持投影,因此,用一个与黑色背景大小相同,但是有一定偏移量的红色背景放在黑背景下面进行模拟。
  1.     // 定义logo黑底
  2.     var topLeft = new Point(0, 0);
  3.     var size = new Size(246, 246);
  4.     var logoBgRect = new Rectangle(topLeft, size);
  5.     // 定义logo红底
  6.     var logoBgRed = new Path.Rectangle(new Rectangle(topLeft + [10, 10], size), 20);
  7.     logoBgRed.fillColor = '#dc0320';
  8.     // 圆角20px
  9.     var logoBg = new Path.Rectangle(logoBgRect, 20);
  10.     logoBg.fillColor = 'black';
复制代码

bg.png

2. 画一个左半圆具有一定宽度的白色弧线
  1.     // 定义中间弧形
  2.     var arcCenter = new Point(164, 123);
  3.     var arcRadius = 88;
  4.     var arcWidth = 50;
  5.     var arcBottom = arcCenter + [0, arcRadius];
  6.     var arcLeft = arcCenter + [-arcRadius, 0];
  7.     var arcTop = arcCenter + [0, -arcRadius];
  8.     var bigArc = new Path.Arc(arcBottom, arcLeft, arcTop);
  9.     bigArc.strokeColor = 'white';
  10.     bigArc.strokeWidth = arcWidth;
复制代码

arc.png

3. 在弧线的两端,画两个直径为弧形宽度的两个白色小圆形。
  1.     // 画上下两个小圆
  2.     var topCircleCenter = arcCenter - [0, arcRadius];
  3.     var bottomCircleCenter = arcCenter + [0, arcRadius];
  4.     var topCircle = new Path.Circle(topCircleCenter, arcWidth/2);
  5.     var bottomCircle = new Path.Circle(bottomCircleCenter, arcWidth/2);
  6.     topCircle.fillColor = 'white';
  7.     bottomCircle.fillColor = 'white';
复制代码

smCircle.png

4. 画中间的小圆形,中间的圆形具有一个从白色到橙色的径向渐变。
  1.     // 中间小圆
  2.     var centerCircle = new Path.Circle(arcCenter, 34);
  3.     // 渐变颜色 #f39b1f
  4.     centerCircle.fillColor = {
  5.         gradient: {
  6.             stops: ['white', '#f39b1f'],
  7.             radial: true
  8.         },
  9.         origin: centerCircle.position,
  10.         destination: centerCircle.bounds.rightCenter
  11.     }
复制代码

logo.png

到此为止,一个固定大小logo就展现出来了。
虽然展现出来的是固定大小的图形,但paper.js画出来的是矢量图形,是可以随意缩放的,并且可以导出svg格式。
SVG格式图片是矢量图形,可以任意缩放不会产生失真。
如果要导出某个尺寸的png格式图像,可以先设置canvas的大小,然后调用paper.project.view.scale进行缩放,然后通过canvas.toDataURL导出png图片就可以了。
具体的代码不啰嗦了,可以查看这个网页的源代码(https://lcofjp.github.io/learn-programming/ee-logo/index.html)(右键->查看网页源代码)。

此内容由EEWORLD论坛网友lcofjp原创,如需转载或用于商业用途需征得作者同意并注明出处


EEWORLD开发板置换群:309018200,——电工们免费装β的天堂,虽然在群里买不到板子,但是可以学会开车;虽然学不到技术,但是可以学会开车;商家勿入!加群暗号:喵


回复

使用道具 举报

8020

TA的帖子

2

TA的资源

管理员

Rank: 13Rank: 13Rank: 13Rank: 13

发表于 2018-10-21 19:53:05 | 显示全部楼层
这个简直帅呆了


回复

使用道具 举报

743

TA的帖子

6

TA的资源

版主

Rank: 6Rank: 6

发表于 2018-10-21 19:53:44 来自手机 | 显示全部楼层
沙发沙发,队长出品,必属良品


回复

使用道具 举报

8384

TA的帖子

128

TA的资源

管理员

Rank: 13Rank: 13Rank: 13Rank: 13

发表于 2018-10-21 20:12:42 来自手机 | 显示全部楼层
感动ing~上次在群里说的结果队长真给弄出来了


回复

使用道具 举报

3287

TA的帖子

0

TA的资源

纯净的硅(高级)

Rank: 6Rank: 6

发表于 2018-10-21 20:18:59 | 显示全部楼层
好流弊的操作,顶一个
So what......


回复

使用道具 举报

5292

TA的帖子

9

TA的资源

版主

Rank: 6Rank: 6

发表于 2018-10-21 20:24:21 来自手机 | 显示全部楼层
厉害厉害


回复

使用道具 举报

294

TA的帖子

4

TA的资源

版主

Rank: 6Rank: 6

发表于 2018-10-21 20:24:37 | 显示全部楼层
好流弊的操作,顶一个,心之所愿无所不能


回复

使用道具 举报

6821

TA的帖子

17

TA的资源

版主

Rank: 6Rank: 6

发表于 2018-10-21 20:55:43 | 显示全部楼层
队长厉害了
training


回复

使用道具 举报

847

TA的帖子

2

TA的资源

版主

Rank: 6Rank: 6

发表于 2018-10-21 21:14:43 | 显示全部楼层
厉害了,真帅!
专注智能产品的研究与开发,专注于电子电路的生产与制造……QQ:2912615383,电子爱好者群: 422240210


回复

使用道具 举报

1632

TA的帖子

1

TA的资源

纯净的硅(高级)

Rank: 6Rank: 6

测评达人

发表于 2018-10-21 21:16:56 | 显示全部楼层
厉害了


回复

使用道具 举报

300

TA的帖子

8

TA的资源

一粒金砂(高级)

Rank: 3Rank: 3

发表于 2018-10-21 23:13:54 | 显示全部楼层
队长牛逼


回复

使用道具 举报

2万

TA的帖子

74

TA的资源

管理员

Rank: 13Rank: 13Rank: 13Rank: 13

发表于 2018-10-22 09:47:00 | 显示全部楼层
2018,加油!继续为中国电子行业做出小小的贡献吧!
QQ 1206973913


回复

使用道具 举报

1180

TA的帖子

2

TA的资源

版主

Rank: 6Rank: 6

发表于 2018-10-22 10:05:45 | 显示全部楼层
加个全局参数,能手动设置生成的大小就好了
然后被打包成小软件,分享出来

点评

可以手动设置大小的,你点最后面的网址就可以生成  详情 回复 发表于 2018-10-22 10:21


回复

使用道具 举报

5440

TA的帖子

185

TA的资源

版主

Rank: 6Rank: 6

 楼主| 发表于 2018-10-22 10:21:34 | 显示全部楼层
本帖最后由 lcofjp 于 2018-10-22 10:26 编辑
通宵敲代码 发表于 2018-10-22 10:05
加个全局参数,能手动设置生成的大小就好了
然后被打包成小软件,分享出来

可以手动设置大小的,点最后面的网址就可以生成
QQ截图20181022102513.png
EEWORLD开发板置换群:309018200,——电工们免费装β的天堂,虽然在群里买不到板子,但是可以学会开车;虽然学不到技术,但是可以学会开车;商家勿入!加群暗号:喵


回复

使用道具 举报

1646

TA的帖子

0

TA的资源

版主

Rank: 6Rank: 6

发表于 2018-10-22 22:46:06 | 显示全部楼层
够用创意的仙人


回复

使用道具 举报

238

TA的帖子

0

TA的资源

一粒金砂(中级)

Rank: 2

发表于 2018-10-22 22:53:18 | 显示全部楼层
美 ,好帖,赞一个,顶楼主


回复

使用道具 举报

738

TA的帖子

0

TA的资源

一粒金砂(高级)

Rank: 3Rank: 3

发表于 2018-10-22 23:30:48 | 显示全部楼层
                        
我从不担心我努力了不优秀,只担心优秀的人都比我更努力。如果你无法忍受孤独,就不要追逐梦想。每一个优秀的人,都有一段沉默的时光。在那一段时光,你付出了很多努力,忍受孤独和寂寞,不抱怨不诉苦,最后渡过了这


回复

使用道具 举报

2765

TA的帖子

0

TA的资源

五彩晶圆(初级)

Rank: 7Rank: 7Rank: 7

发表于 2018-10-23 10:11:45 | 显示全部楼层
队长牛逼
作为一个水军,就是尽量的多回帖,因为懂的技术少,所以回帖水分大,见谅!
EEWORLD开发板置换群:309018200,——电工们免费装β的天堂,商家勿入!加群暗号:喵


回复

使用道具 举报

1412

TA的帖子

1

TA的资源

纯净的硅(中级)

Rank: 5Rank: 5

发表于 2018-10-23 10:38:30 | 显示全部楼层
!!!!

厉Hello,world队长~~~
HELLO_WATER


回复

使用道具 举报

185

TA的帖子

0

TA的资源

一粒金砂(中级)

Rank: 2

发表于 2018-10-23 12:41:19 | 显示全部楼层
楼主牛逼。


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

  • 论坛活动 E手掌握

    扫码关注
    EEWORLD 官方微信

  • EE福利  唾手可得

    扫码关注
    EE福利 唾手可得

小黑屋|手机版|Archiver|电子工程世界 ( 京ICP证 060456 )

GMT+8, 2018-11-18 15:35 , Processed in 0.558390 second(s), 17 queries , Gzip On, MemCache On.

快速回复 返回顶部 返回列表