制作一款简易的调色画板,要用到的知识:页面布局、ToggleButton、ToggleButtonBehavior、get_color_from_hex(兼容十六进制编码颜色);功能上要可以选择颜色,选择画笔线宽,可以清除画板。具体实现如下:

选建一个main.py文件,内容代码如下

from kivy.app import App
from kivy.graphics import Line,Color #引入绘图
from kivy.uix.widget import Widget #引入控件
from kivy.utils import get_color_from_hex #兼容十六进制颜色
from kivy.uix.behaviors import ToggleButtonBehavior #引入按钮开关行为
from kivy.uix.togglebutton import ToggleButton #引入开关按钮 class FrameToggleButton(ToggleButton):
#当前按钮添加边框
def do_press(self):
if self.state=='一般':
ToggleButtonBehavior.do_press(self) class DrawCanvasWidget(Widget): #布局类
def __init__(self,**kwargs):
super(DrawCanvasWidget, self).__init__(**kwargs)
#设置默认颜色
self.change_color(get_color_from_hex('#19caad'))
self.line_width=2 def on_touch_down(self, touch):
#触摸显示轨迹
if Widget.on_touch_down(self,touch):
return
with self.canvas:
touch.ud['current_line']=Line(points=(touch.x,touch.y),width=self.line_width) def on_touch_move(self, touch):
#连线画线
if 'current_line' in touch.ud:
touch.ud['current_line'].points+=(touch.x,touch.y) def change_color(self,new_color):
#调色选择画笔颜色
self.last_color=new_color
self.canvas.add(Color(*new_color)) def change_line_width(self,line_width='一般'):
#选择画笔线宽
self.line_width={'较细':1,'一般':2,'较粗':4}[line_width] def clear_canvas(self):
#清空画板
saved=self.children[:]
self.clear_widgets()
self.canvas.clear()
for widget in saved:
self.add_widget(widget)
self.change_color(self.last_color) class PaintApp(App): #继承App类
#实现App类的build()方法(继承自App类)
def build(self):
self.canvas_widget=DrawCanvasWidget()
return self.canvas_widget #返回根控件 if __name__=='__main__':
PaintApp().run()

再建一个paint.kv文件,内容代码如下:

#:import C kivy.utils.get_color_from_hex
#引入颜色转换16进制编码颜色的方法 <BottomColorButton@FrameToggleButton>:
group:'color'
background_normal:'images/radio_background_normal.png'
background_down:'images/radio_background_down.png'
border:(3,3,3,3)
on_release:app.canvas_widget.change_color(self.background_color) #触发事件 <BottomClearButton@FrameToggleButton>:
# group:'color'
background_normal:''
background_down:''
border:(3,3,3,3)
on_release:app.canvas_widget.clear_canvas() #触发事件 <LineWidthButton@FrameToggleButton>:
group:'line_width'
color:C('#2c3e50') #文字颜色
background_color:C('#ecf0f1') #背景颜色
background_normal:'images/radio_background_normal.png'
background_down:'images/radio_background_down.png'
border:(3,3,3,3)
on_release:app.canvas_widget.change_line_width(self.text) #触发事件 <DrawCanvasWidget>:
canvas.before:
Color:
rgba:[1,1,1,1]
Rectangle:
pos:self.pos
size:self.size BoxLayout:
orientation:'horizontal'
padding:2
spacing:2
x:0
top:root.top
size_hint:None,None
size:280,44 LineWidthButton:
text:'较细'
LineWidthButton:
text:'一般'
state:'down'
LineWidthButton:
text:'较粗' BottomClearButton:
font_size:15
bold:5
text:'清除画板'
background_color:1,0,0,1
# on_release:root.clear_canvas() #触发事件 BoxLayout: #添加一个布局
id:bottom_box #添加ID属性
orientation:'horizontal' #指定布局方向
padding:2 #设置间距
spacing:2 #设置间距
size:root.width,40 #设置大小
BottomColorButton:
background_color:C('#19caad')
state:'down'
BottomColorButton:
background_color:C('#8cc7b5')
BottomColorButton:
background_color:C('#a0ee1')
BottomColorButton:
background_color:C('#bee7e9')
BottomColorButton:
background_color:C('#beedc7')
BottomColorButton:
background_color:C('#d6d5b7')
BottomColorButton:
background_color:C('#d1ba74')
BottomColorButton:
background_color:C('#e6ceac')
BottomColorButton:
background_color:C('#ecad9e')
BottomColorButton:
background_color:C('#f4606c')
BottomColorButton:
background_color:C('#3498db')
BottomColorButton:
background_color:C('#1abc9c')
BottomColorButton:
background_color:C('#2ecc71')
BottomColorButton:
background_color:C('#f1c40f')
BottomColorButton:
background_color:C('#e67e22')
BottomColorButton:
background_color:C('#e74c3c')
BottomColorButton:
background_color:C('#9b59b6')
BottomColorButton:
background_color:C('#ecf0f1')
BottomColorButton:
background_color:C('#95a5a6')
BottomColorButton:
background_color:C('#000000')
BottomColorButton:
background_color:C('#f4606c')

源码内所用到的图片文件,可以点击下载源码,在源码内找到项目所需的图片文件。

用kivy学习制作简易调色画板app的更多相关文章

  1. Html学习_简易个人网页制作

    应用学到的内容,制作简易个人网页 <!DOCTYPE html> <html> <head> <title>Jane.liu</title> ...

  2. kivy学习二:做一个查询所在地区身份证前6位的小软件

    经过半个月的尝试,终于成功,记录下来备查! 做完之后发现有很多的问题没有解决,请大佬多批评指教! 强烈建议:学习KIVY的查看官方文档 需要用的知识: 1.字典的相关知识 2.kivy的下拉列表(Dr ...

  3. webAPP制作框架Ionic--构建APP侧边栏 底部选项卡 轮播图 加载动画

    超好用的移动框架--Ionic Ionic是一个轻量的手机UI库,具有速度快,界面现代化.美观等特点. 为了解决其他一些UI库在手机上运行缓慢的问题,它直接放弃了IOS6和Android4.1以下的版 ...

  4. 免费IP代理池定时维护,封装通用爬虫工具类每次随机更新IP代理池跟UserAgent池,并制作简易流量爬虫

    前言 我们之前的爬虫都是模拟成浏览器后直接爬取,并没有动态设置IP代理以及UserAgent标识,本文记录免费IP代理池定时维护,封装通用爬虫工具类每次随机更新IP代理池跟UserAgent池,并制作 ...

  5. 利用Unity3D制作简易2D计算器

    利用Unity3D制作简易2D计算器 标签(空格分隔): uiniy3D 1. 操作流程 在unity3DD中创建一个新项目 注意选择是2D的(因为默认3D) 在Assets框右键新建C#脚本 在新建 ...

  6. 在iOS中实现一个简单的画板App

    在这个随笔中,我们要为iPhone实现一个简单的画板App. 首先需要指出的是,这个demo中使用QuarzCore进行绘画,而不是OpenGL.这两个都可以实现类似的功能,区别是OpenGL更快,但 ...

  7. C#制作简易屏保(转)

    C#制作简易屏保[原创] 原始网址: http://www.cnblogs.com/drizzlecrj/archive/2006/10/06/522182.html 2006-10-06 16:25 ...

  8. 【百度地图API】——如何用label制作简易的房产标签

    原文:[百度地图API]--如何用label制作简易的房产标签 摘要: 最近,API爱好者们纷纷说,自定义marker太复杂了!不仅定义复杂,连所有的dom事件都要自己重新定义.有没有快速简易创建房产 ...

  9. Swift 中使用 SwiftyJSON 制作一个比特币价格 APP

    Swift 中处理 JSON 数据有很多种方式,可以使用原生的 NSJSONSerialization,也可以使用很多第三方库.原生的 NSJSONSerialization 方式这篇文章中介绍过.这 ...

随机推荐

  1. centos Gitlab AD 集成

    简述 Gitlab支持集成LDAP用户认证系统.兼容包括Microsoft Active Directory, Apple Open Directory, Open LDAP, 与389 Server ...

  2. jvm代码热替换过程中异常

    BTrace java.lang.NoClassDefFoundError: javax/xml/bind/JAXBException 具体如下: 1. 信这个问题很多小伙伴已经遇到了,这是在你的jd ...

  3. mysql中的条件语句case when/if函数

    主要知识点为case函数,if函数,ifnull函数,elt函数几部分,主要用于mysql语句中的逻辑判断 待操作的表如下: p.p1 { margin: 0; font: 16px Menlo; c ...

  4. ESP32使用SPIFFS文件系统笔记

    基于ESP-IDF4.1 1 #include <stdio.h> 2 #include <string.h> 3 #include <sys/unistd.h> ...

  5. YAOI Round #7 题解

    前言 比赛链接: Div.1 : http://47.110.12.131:9016/contest/16 Div.2 : http://47.110.12.131:9016/contest/15 D ...

  6. 【spring源码系列】之【Bean的循环依赖】

    希望之光永远向着目标清晰的人敞开. 1. 循环依赖概述 循环依赖通俗讲就是循环引用,指两个或两个以上对象的bean相互引用对方,A依赖于B,B依赖于A,最终形成一个闭环. Spring循环依赖的场景有 ...

  7. Pytorch系列:(八)学习率调整方法

    学习率的调整会对网络模型的训练造成巨大的影响,本文总结了pytorch自带的学习率调整函数,以及其使用方法. 设置网络固定学习率 设置固定学习率的方法有两种,第一种是直接设置一些学习率,网络从头到尾都 ...

  8. Markdown 样式美化大全

    Markdown 样式大全 目录 Markdown 样式大全 1. 键盘 2. 路径 3. 彩色字体背景 4. 折叠 5. 锚点链接 原生锚点1 原生锚点2 Hello Hello 6. 待办列表 7 ...

  9. Centos 7 配置阿里云 yum 源

    Centos 7 配置阿里云 yum 源 一. 禁用 yum 插件 fastestmirror 修改插件的配置文件 cp /etc/yum/pluginconf.d/fastestmirror.con ...

  10. 【Java基础上】一、简述Java

    一.简述Java ​ Java是一种高级的面向对象的程序语言,在此处,不需要了解什么叫做面向对象,因为后面的文章中自然会谈到这方面的论述.那么,Java就是一个计算机的编程语言. 1.1 Java的历 ...