前言
Hi~ o(* ̄▽ ̄*)ブ大家好,我是Elan。
在python学习之旅中我们不免要接触到turtle这个绘画库。
大家可能都看到某些大神似乎能把python turtle玩得惟妙惟肖,
可以用turtle画出极为美妙的画作。
而我们……
用途
今天我要介绍的东西并不能帮你像他们一样NB,
主要有这些用途:
- 为了
应付用一种别具一格的方式完成作业 - 供
闲的没事具有闲情雅致的人娱乐 - 供
妄想梦想成为绘画大神的人使用
具体就是将svg中的(目前只有)线条line、矩形rect、圆circle由turtle画出来。
具体内容
代码
import turtle
import xml.etree.ElementTree as ET
def draw_svg(svg_file):
# 创建turtle画布
screen = turtle.Screen()
screen.setup(800, 600)
screen.bgcolor("white")
# 创建turtle对象
t = turtle.Turtle()
t.speed(0) # 设置速度为最快,如果想要慢慢欣赏可以调节速度
# 解析SVG文件
tree = ET.parse(svg_file)
root = tree.getroot()
# 绘制SVG元素
for element in root.iter():
tag = element.tag.split('}')[-1]
if tag == 'circle':
draw_circle(t, element.attrib)
elif tag == 'rect':
draw_rect(t, element.attrib)
elif tag == 'line':
draw_line(t,element.attrib)
# 可以继续添加其他元素的绘制函数
# 隐藏turtle并显示绘制结果
t.hideturtle()
turtle.done()
def draw_circle(t, attribs):
cx = 0-(float(attribs['cx'])-400)
cy = 0-(float(attribs['cy'])-300)
r = float(attribs['r'])
t.penup()
t.goto(cx, cy)
t.pendown()
t.circle(r)
def draw_rect(t, attribs):
x = float(attribs['x'])-400
y = 0-(float(attribs['y'])-300)
width = float(attribs['width'])
height = float(attribs['height'])
t.penup()
t.goto(x, y)
t.pendown()
for _ in range(2):
t.forward(width)
t.right(90)
t.forward(height)
t.right(90)
def draw_line(t, attrib):
x1 = float(attrib['x1'])-400
y1 = 0-(float(attrib['y1'])-300)
x2 = float(attrib['x2'])-400
y2 = 0-(float(attrib['y2'])-300)
t.penup()
t.goto(x1, y1)
t.pendown()
t.goto(x2, y2)
# 可以继续添加其他元素的绘制函数
if __name__ == "__main__":
svg_file = r"svg_path"
draw_svg(svg_file)
解析
首先import turtle以及xml.etree.ElementTree。
xml.etree.ElementTree(以下简称et) 在我的理解里是一个解析xml的库,
svg是xml的一种表达,所以我们会有用到et。
然后创建画布,如果有需要的话这里的参数都可以调的。
能绘制元素在这个代码里有三个,我们分三步走。
这里开头会节选一段来自mdn web docs的介绍。
1.circle
介绍:
<circle>
SVGhttps://developer.mozilla.org/zh-CN/docs/Web/SVG 元素是一个 SVG 的基本形状,用来创建圆,基于一个圆心和一个半径。
用法
类别 | 基本形状元素、图形元素、形状元素 |
---|---|
允许的内容 | 任意数量、任意顺序的下列元素: 动画元素https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element#animation_elements 描述性元素https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element#descriptive_elements |
示例
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<circle cx="50" cy="50" r="50" />
</svg>
我的代码中:
float(attribs['cx'])
float(attribs['y']
就是表示获取圆的x坐标和y坐标,
至于为什么要:
x = float(attribs['x'])-400 y = 0-(float(attribs['y'])-300)
就是由于turtle的特性,你可以试试删掉这些字段看效果,
在此我就不多赘述。
2.rect
<rect>
元素是 SVG 的一个基本形状,用来创建矩形,基于一个角位置以及它的宽和高。它还可以用来创建圆角矩形。
用法
类别 | 基本形状元素、图形元素、形状元素 |
---|---|
允许的内容 | 任意数量、任意顺序的下列元素: 动画元素https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element#animation_elements 描述性元素https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element#descriptive_elements |
示例
<svg viewBox="0 0 220 100" xmlns="http://www.w3.org/2000/svg">
<!-- Simple rectangle -->
<rect width="100" height="100" />
<!-- Rounded corner rectangle -->
<rect x="120" width="100" height="100" rx="15" />
</svg>
基本同上,不多赘述。
3.line
<line>
元素是一个 SVG 基本形状,用来创建一条连接两个点的线。
用法
类别 | 基本形状元素、图形元素、形状元素 |
---|---|
允许的内容 | 任意数量、任意顺序的下列元素: 动画元素https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element#animation_elements 描述性元素https://developer.mozilla.org/zh-CN/docs/Web/SVG/Element#descriptive_elements |
示例
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<line x1="0" y1="80" x2="100" y2="20" stroke="black" />
<!-- 如果不指定描边颜色,则无法看见线条 -->
</svg>
基本同上,不多赘述。
最后
简单
if __name__ == "__main__":
svg_file = r"svg_path"
draw_svg(svg_file)
以下,我们就可以把svg中的矩形、线段、圆形画入turtle了。
测试
我使用了菜鸟工具的SVG 在线编辑器 | 菜鸟工具 (jyshare.com)https://www.jyshare.com/more/svgeditor/
来演示(感谢菜鸟工具)
我用线段、矩形和圆写了一个“Elan”
保存后测试
可以看到“Ela”都画出来了,经过探究:
这里的圆并不是<circle>,看来这个方法并不完全通用,只能用于正圆(之前忽略了这一点)。
总结
主体功能很完善。
今天get:svg知识、turtle知识
为了应付用一种别具一格的方式完成作业的同僚同学要来问了,
这样并不能得到直接的turtle代码啊。
其实你可以自己动动小手稍微改编一下,
如果我后期有空的话我也可以专门做一个新的版本,
但我现在要去写作业了(卷子真多)
下回再见!
制作不易,暴点金币