第 26 章图形开发

发布于 2024-02-10 15:26:30 字数 2554 浏览 0 评论 0 收藏 0

第 26 章图形开发

26.1. SVG 图形库

26.1.1. 安装
26.1.2. 绘制多边形
26.1.3. SVG 事件

26.2. 二维码

26.2.1. qrcode
26.2.2. MyQR
26.2.3. 从图片识别二维码
26.2.4. 从摄像头识别二维码

26.3. graphviz

26.3.1. 安装 graphviz 环境
26.3.2. 例子

26.1. SVG 图形库

26.1.1. 安装

pip3 install drawsvg -i https://pypi.tuna.tsinghua.edu.cn/simple
pip3 install cairosvg -i https://pypi.tuna.tsinghua.edu.cn/simple

26.1.2. 绘制多边形

lines = draw.Lines(
    # 坐标
    5, 5,
    # 横线 
    200, 5,
    # 竖线 
    200, 40, 
    # 斜线
    200 - 10, 20,
    # 横线2
    5 + 10, 20,
    # 斜线
    5, 40,
    # 闭合竖线
    5,5,
    fill='none', stroke='black')

26.1.3. SVG 事件

<!DOCTYPE html>  
<html>  
<body>  
<svg width="500" height="150">  

<rect x="10" y="10" width="100" height="40"  
    
   onmouseover="this.style.stroke = 'blue'; this.style['stroke-width'] = 5;"  
   onmouseout="this.style.stroke = 'green'; this.style['stroke-width'] = 1;"
   onclick="this.style['width'] = 300;" />  

</svg>  
</body>  
</html>

<!DOCTYPE html>
<html>

<body>
   <input id="aa" type="text" value="200" onclick="svg.style['width']=this.value;" />
   <svg width="500" height="150">


      <rect id='svg' x="10" y="10" width="100" height="40"
         onmouseover="this.style.stroke = 'blue'; this.style['stroke-width'] = 5;"
         onmouseout="this.style.stroke = 'green'; this.style['stroke-width'] = 1;"
         onclick="this.style['width'] = 300; aa.value='300'" />

   </svg>
</body>

</html>

分享到QQ

分享到微博