精华内容
下载资源
问答
  • 儿童画板
    千次阅读
    2012-12-11 11:41:51

    点击这里去下载

    点击“普通下载”-》等待30秒-》“保存”

    更多相关内容
  • 创客教育作业--儿童画板
  • 儿童画板

    2012-01-27 14:34:12
    一款绿色涂鸦软件。非常适合儿童在电脑上使用。
  • 卡通儿童画画学习html网站模板下载
  • 画板的程序

    2012-11-24 10:52:42
    利用c#开发的画板程序,能实现画基本图形,文件保存和打开,清除绘画界面的程序。
  • 行业资料-电子功用-儿童电子绘画板的介绍分析.rar
  • windows小画板程序

    2008-12-21 22:11:45
    我自己做的windows小画板用C++实现的,有些功能不全的吧,但是基本全了
  • 行业资料-交通装置-一种带画板儿童学步推车.exe
  • 电子政务-儿童益智电脑式画板.zip
  • 一种儿童学前教育用画板的制作方法.docx
  • 以babycare儿童液晶手写板为例。 【详情太长,没想好怎么放,有兴趣自己平台看吧】 1、逻辑结构要清晰明了 这是详情页的基本要求,这能比较容易让人明白这款详情页想要说什么。 就好比一个人,说话逻辑混乱,就容易...

    这几天想帮宝宝买个写字板,看了几个详情页,觉得挺有意思的,值得说一下。

    很多电商从业者看详情页,不知道如何判断其好坏,只能直观地看设计得高不高大上,或者销量好不好。觉得设计得高大上的,或者销量好的,就是好的详情页。

    这些因素是会有影响,但没有必然的联系。有些页面做得非常漂亮,但是销量很糟糕,有些产品能卖爆,只是因为它便宜而已。

    那些爆款详情页,对销量的帮助几何,如果看不出门道而盲目抄袭的话,则难以取其精华去其糟粕,最终画虎不成反类犬。

    作为一个策划,在拆解一款详情页的时候,可以依次从“逻辑结构、主推卖点、包装切入、文案表达,图文匹配”五个维度入手,总体要符合“特别”“清楚”的原则。

    以babycare儿童液晶手写板为例。

    【详情太长,没想好怎么放,有兴趣自己平台看吧】

    1、逻辑结构要清晰明了

    这是详情页的基本要求,这能比较容易让人明白这款详情页想要说什么。

    就好比一个人,说话逻辑混乱,就容易让人生厌,而一款详情页前言不搭后语,会让人感到云里雾里。

    这款详情页的结构是这样的:

    首屏→护眼→多彩分区→作用(挖掘绘画天赋)→向往(成为艺术家)→一键消除→锁屏防误删→耐摔→感应灵敏→作用(掌控粗细)→轻巧→待机长→多用途→细节→参数

    这个框架下,基本是讲完一个问题,再接着讲下一个问题,不会跳来跳去讲同一个问题。并且当买家对一个卖点可能会有疑问时,马上接着解答这个疑问。

    比如看到“一键消除”,可能会有疑问误删了怎么办,所以接着马上讲“锁屏防误触”。而讲到“灵敏感应”买家可能会想这个有什么用,接下来马上就说可以掌控粗细。这些就是从买家理解的角度来介绍产品。

    2、主推卖点要独特有用

    现在的产品同质化实在是太严重了,所以如果能挖掘出只属于这款的,竞品没有的卖点,或者是大家都有的,但是竞品觉得不重要没有说出来的卖点,那一定要好好珍惜。这就是独特。

    这个道理其实很多人都懂,但是容易陷入一个误区,就是为了独特而独特,最终找出来的差异化卖点买家根本不关心,或者表述地让人根本看不懂有什么用,最终只是白费劲。这就是有用。

    具体到这款详情页,它主推的是“护眼”“多彩分区”,是抓得比较准的。

    这款产品的差异化卖点并不难找,因为同类的液晶画板都是单色的,而这款是多色的,所以显而易见应该强调这点。

    真正见功力的是“护眼”,这是从家长的疑虑出发,而找出来的一个卖点。因为这是一个电子液晶显示屏,所以很自然会有会不会伤眼睛的问题。所以就直接告诉家长,放心给孩子用,不伤眼睛。

    而这个屏幕除了色彩之外,其实跟竞品不会有太大区别,所以“护眼”其实人人可说,但是别人都不说。这就是用心多和少的问题了。

    3、包装切入要直击需求

    就广告文案来说,一句文案有三个层面,首先是策略,其次是洞察,最后才是文案表达。

    策略就是要推产品的哪个卖点,洞察就是这个卖点能够解决消费者在什么场合下的什么需求,文案就是把这一切表达出来

    先举个家喻户晓的手机例子。

    策略就是充电快续航强。

    洞察就是日常经常会面临有重要电话要打,但是手机却突然没电了,这种情况是让人很着急的。

    文案就是“充电五分钟,通话两小时”。

    上一点讲的主推卖点其实就相当于策略,而包装切入点其实就是洞察,要解决前面说的,这个卖点到底有什么用的问题。

    就这一款来说,它的策略是要强调护眼和多彩,洞察就是家长既想发展孩子的绘画天赋,又想保护孩子的视力,文案是“捍卫五彩视界”

    0b474b787c8d0f6e27d9fe92ec603d10.png

    这句文案虽然运用了双关和谐音的技巧,但整体表现只能算中规中矩,看得出来很刻意的痕迹,是出自专业文案之手的大路货。

    同样是跟小孩有关的,有一个钢琴品牌是这样写的,“学钢琴的小孩不会变坏”,这是台湾的一句著名的广告语。

    4、文案表达要直观易懂

    “学钢琴的小孩不会变坏”是要顶级文案才能写出来的。大部分从业者能写出“捍卫五彩视界”就已经很不错了。比这个更差劲的比比皆是。

    这种神来之笔的文案,需要突然间的灵光一闪,更需要漫漫无期的苦思冥想。对于快餐式的电商文案来说,满足最基本的要求即可勉强过关。

    这个最基本的要求就是直观易懂。

    一般是要按照FAB法则,说清楚这个卖点是什么,起什么作用,对消费者的运用来说有什么用。满足了这个要求,才是一个合格的详情页文案。否则纵然是写得天花乱坠文采飞扬,也不过是雾里看花无根之水。

    很多糟糕的详情页文案用故弄玄虚的手法,要自我辩解说这是品牌调性与创意概念,其实是为了掩饰他根本不懂产品的尴尬而已。

    1ad49252e0d70dea4483ae31dd39ab8b.png

    就这个手写板来说,第二屏的标题是“柔性手写液晶屏,智护双眸黑科技”,“柔性手写”是F属性,“智护双眸”是B利益。然后在正文中补充解释,“依靠外界反射光显示、无背光源,无蓝光”,这就是A作用。

    所以这是一段很完整的FAB文案,让人看完就知道这是什么(F属性)、起什么作用(A作用)、对消费者来说有什么好处(利益)。

    详情页文案能写到这个份上,说明写文案的人对产品已经了解得比较到位了。至少可以打七八十分。

    至于“智护双眸黑科技”中的“智”和“黑科技”,只是用来装逼凑字数而已,可以显得牛逼哄哄一点,这也是常用的文案伎俩。

    5、图文匹配要瞬间秒懂

    当一个新人进入广告业,就会看到各种干货和专业书说,做创意切忌给图配文或者给文配图。但是做详情页的话,就是要给图配文或者给文配图,这就是图文匹配。

    详情页就是要让买家用最快的速度,秒懂我们要表达的是什么,所以图是文案的演示,文案是图的注解。详情页设计也需要创意,但是详情页创意是为了让买家更快地理解卖点,而不是像戛纳大创意广告一样,要人想半天才能领会其精妙。

    我们继续以这个写字板的第二屏为例,其实做得有点糟糕。我不是很明白为什么要在这里放一个分解图,和“柔性手写”“智护双眸”都没什么关系,只能解释为为了科技感而科技感。

    5a087c5e549318763fa3770920f55997.png

    倘若一定要放分解图的话,建议可以补充解释一下每一层都是什么,有什么用,目的是为了强化“无背光源”这点。

    也可以参考Kindle的做法,以一束自然光照着产品,来表达“依靠外界反射光显示”这点。

    bb2d0384e8734400049d04e915794108.png

    参考这张图做产品拍摄的话,一方面成片很有质感,另一方面同行都没有这种表现手法,这就是创意。

    119afbad2234db3ff0ac6d343bc84e50.png

    下面有一屏说“成就梵高艺术家”,图片背景放一幅梵高的话,这就比较巧妙了。这是设计师真正有动脑的结果。

    86869be86f2b3e615c25758532662c96.png

    小结

    前面说到,详情整体要符合“特别”“清楚”的原则,在这五个维度中,“主推卖点要独特有用”“包装切入要直击需求”,说的是特别。“逻辑结构要清晰明了”“文案表达要直观易懂”,说的是清楚。“图文匹配要瞬间秒懂”,就是要“特别清楚”。

    无论什么类目的详情页,只要这五个方面做到位了,详情就不会差,产品就更具爆款潜力。

    以上,同行见笑。

    推荐阅读

    结  构|你知道吗,99%的详情页策划,都能套用这个模板

    参考图|做详情不会找参考,相当于抄都不会抄

    文案|不会写还不错的文案,就先写不会错的文案

    卖点|我有四个方法,帮你定位宝贝详情核心卖点

    展开全文
  • C# 经典个人小画板

    2010-07-05 15:19:22
    通过学习C#以来 由于平常无聊时 做的一个小画板 出现点小问题 !
  • HTML5手机端画板涂鸦代码是一款基于HTML5 Canvas制作的全屏的手机画板,主要功能有选择颜色,画笔粗细,橡皮檫工具和删除撤销。
  • 16.神奇画笔-炫彩画板-项目源码与素材,Scratch少儿编程,经典教学作品,儿童益智游戏
  • 用VC做画板的开发

    2013-08-06 10:08:11
    该文档讲解了如何使用VC做画板的开发文档,感兴趣的可以下载下来看看。
  • 达威尔液晶手写板 儿童涂鸦画板写字板 电子手写板手绘板绘画板,没有粉尘 没有油墨 绿色环保!产品参数:产品名称:液晶电子手写板品牌: Rewl/达威尔型号: H-001生产企业: 深圳市浩凌科技有限公司颜色分类: 橙色 ...
    达威尔液晶手写板 儿童涂鸦画板写字板 电子手写板手绘板绘画板,没有粉尘 没有油墨 绿色环保!



    产品参数:
    产品名称:液晶电子手写板
    品牌: Rewl/达威尔
    型号: H-001
    生产企业: 深圳市浩凌科技有限公司
    颜色分类: 橙色 粉红色 白色
    接口类型: COM
    感应方式: 电磁压感应
    成色: 全新
    材质:柔性液晶膜 ABS+PC外壳
    清除方式:一键清除
    膜层颜色:黑色
    书写方式:压力书写
    笔迹颜色:绿色
    产品净重:190g
    尺寸:10英寸 250*174*6.5mm


    产品特点:
    1、没有粉尘,没有油墨。
    2、酷炫外观设计理念,孩子的启蒙好伙伴。
    3、记录闪现创意,拓展孩童思维。
    4、柔性液晶LCD面板,压力绘画除了绘画笔,还可以用手指。
    5、一键清除按钮,省心方便。
    6、新增智慧锁功能,一键锁定,不易勿删。
    7、轻薄,绿色环保,书写无忧。
    8、耐用长效,绿色能源。

    9、绚丽多彩,吸引宝宝目光。


    展开全文
  • 今天站在技术角度,给大家分享一款个人开发的在线画板工具-速写板,支持在线画画、画图、思维导图等,可以用来涂鸦、画草图、快速表大想法等。 在线画板_速写板_suxieban.com 关键词 在线画板、在线画图、在线...

            今天站在技术角度,给大家分享一款个人开发的在 线画板工具-速写板,支持在线画画、画图、思维导图等,可以用来涂鸦、画草图、快速表大想法等。

    在线画板_速写板_suxieban.com
    • 关键词

         在线画板、在线画图、在线画画、在线手写板、在线写字板、速写板、图片制作、SVG制作、图片处理

    • 背景 

          速写板 开发的初衷是,当身边没有纸和笔时,或许一款在线画画板,在线写字板工具可以帮助我们,快速表达内心的想法。随着版本迭代,速写板 已经具备一些简单的设计能力。

    • 技术解析 

       技术实现:html5、bootstrap4、jquery、sass、canvas、fabric、minicolor等一些优秀的开源插件、集成 速抠图 在线抠图插件

    • Html代码:
      
      <!doctype html>
      <html lang="en" xmlns="http://www.w3.org/1999/html">
      <head>
          <!--meta-->
          <meta charset="utf-8">
          <meta name="viewport"
                content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
          <meta name="google-site-verification" content="sWQIaElZVA4xDPoRQZPl6uOJhwrTEr2pfXcHovtJAMA"/>
          <meta name="baidu-site-verification" content="dj0FWqQTAE"/>
          <meta name="360-site-verification" content="fc2c1b4004816df56b0f448becfd5e67"/>
          <meta name="sogou_site_verification" content="979yOJcRGw"/>
          <meta name="shenma-site-verification" content="045032629fec33d5225432180ee0f6a1_1581678794"/>
          <meta name="msvalidate.01" content="7C3A8A99AF6AA9F926A0F1A766913B4C"/>
          <title>画画_画图_思维导图_在线手写板_速写板</title>
          <meta name="description"
                content="速写板 suxieban.com 提供免费在线画图软件、画画软件、图片制作、SVG制作等,支持画画、画图、画思维导图、流程图、草图,图片生成、素材导入、SVG导出等。用户可通过画笔、喷漆、插入文字、图形库、素材库及功能菜单快捷高效的画画、画图、制作并分享精美的图片等。"/>
          <meta name="keywords" content="画画,画图,思维导图,绘图,画图软件,在线画图,图片制作,在线手写板,速写板,SVG制作"/>
          <meta content="all" name="robots"/>
          <meta content="suxieban.com" name="copyright"/>
          <meta content="suxieban.com" name="author"/>
          <link rel="icon" href="favicon.ico" type="image/x-icon"/>
          <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"/>
          <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
          <meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
          <meta content="no-cache" http-equiv="pragma"/>
          <meta content="no-cache, must-revalidate" http-equiv="Cache-Control"/>
          <meta content="-1" http-equiv="expires"/>
          <!--css-->
          <!--css-->
          <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
          <link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/5.12.0-1/css/all.min.css">
          <link rel="stylesheet" href="https://cdn.staticfile.org/jquery-minicolors/2.3.4/jquery.minicolors.png">
          <link rel="stylesheet" href="https://cdn.staticfile.org/jquery-minicolors/2.3.4/jquery.minicolors.min.css">
          <!--my.css-->
          <link rel="stylesheet" href="css/sketch-pad.min.css?v=0.4">
          <!--js-->
          <script src="https://cdn.staticfile.org/jquery/3.4.1/jquery.min.js"></script>
          <script src="https://cdn.staticfile.org/jquery-minicolors/2.3.4/jquery.minicolors.min.js"></script>
          <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
          <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
          <script src="https://cdn.staticfile.org/fabric.js/4.0.0-beta.5/fabric.min.js"></script>
          <!--my.js-->
          <script src="js/my/sketchPad.min.js?v=1.1"></script>
          <script src="js/my/common.js?v=0.1"></script>
          <script data-ad-client="ca-pub-8551674815797939" async
                  src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
      </head>
      <body class="bg-light p-0 m-0 w-100 h-100">
      <div hidden>
          <img alt="画图_思维导图_在线手写板_速写板" src="file/title.jpg" width="250" height="150">
          <h3>
              速写板是一款免费的在线画图、画画工具网站及在线手写板工具软件,用户通过速写板提供的画布、画笔、文字插入、图形库、素材库等功能,可快捷高效的画画、绘图、画思维导图、流程图、草图等,同时支持图片制作及生成、SVG制作及生成。</h3>
      </div>
      <div class="container-fluid">
          <div id="topRowDiv" class="row bg-dark bg-gradient-dark">
              <div class="col-lg-2">
                  <nav class="navbar navbar-expand-lg navbar-dark bg-dark bg-gradient-dark m-0 p-0">
                      <a class="navbar-brand font-weight-bold pr-1 mr-0" href="https://www.suxieban.com">
                          <i class="fa fa-tablet-alt"></i> <span>速写板</span>
                      </a>
                      <div class="btn-group btn-group-sm">
                          <button id="btnOptionsSet" type="button"
                                  class="btn btn-dark file-btn">
                              <i class="fa fa-cog"></i>
                          </button>
                          <div class="btn-group btn-group-sm">
                              <button type="button"
                                      class="btn btn-dark dropdown-toggle" data-toggle="dropdown"
                                      title="导入文件">
                                  <i class="fa fa-folder-open"></i>
                              </button>
                              <div class="dropdown-menu dropdown-menu-right dropdown-menu-sm-left">
                                  <a id="btnImport" class="dropdown-item" title="导入速写板生成的编辑文件" href="#">
                                      <i class="fa fa-database "></i> 导入速写板SXB可编辑文件
                                  </a>
                                  <input id="importFileBtn" class="file" accept=".sxb" type="file" hidden/>
                                  <a id="btnImportImg" class="dropdown-item" title="导入图片素材" href="#">
                                      <i class="fa fa-image"></i> 导入图片素材
                                  </a>
                                  <input id="fileImportImg" class="file" type="file" hidden/>
                                  <a id="btnImportSVG" class="dropdown-item" title="导入SVG素材" href="#">
                                      <i class="fa fa-passport"></i> 导入SVG素材
                                  </a>
                                  <input id="fileImportSVG" class="file" accept=".svg" type="file" hidden/>
                              </div>
                          </div>
                          <div class="btn-group btn-group-sm">
                              <button type="button" class="btn btn-dark dropdown-toggle"
                                      data-toggle="dropdown"
                                      title="生成图片(CTRL + S)">
                                  <i class="fa fa-cloud-download-alt"></i>
                              </button>
                              <div class="dropdown-menu dropdown-menu-right dropdown-menu-sm-left">
                                  <a id="fileDownLoadBtn" class="dropdown-item my-sm-hide" href="#">
                                      <i class="fa fa-database "></i> 生成速写板SXB可编辑文件
                                  </a>
                                  <a id="imgDownLoadBtn" class="dropdown-item" href="#">
                                      <i class="fa fa-image "></i> 生成图片(CTRL + S)
                                  </a>
                                  <a id="imgSaveCut" class="dropdown-item" href="#">
                                      <i class="fa fa-crop "></i> 生成图片并剪裁
                                  </a>
                                  <a id="svgDownLoadBtn" class="dropdown-item my-sm-hide" href="#">
                                      <i class="fa fa-passport "></i> 生成SVG
                                  </a>
                              </div>
                          </div>
                      </div>
                  </nav>
              </div>
              <div class="col-lg-10 pr-sm-0 pt-1 pb-1">
                  <div id="toolsBar" class="btn-group btn-group-sm">
                      <button id="btnPen" type="button" class="btn btn-dark"
                              title="铅笔">
                          <i class="fa fa-pen" title="铅笔"></i>
                      </button>
                      <button id="btnSpray" type="button" class="btn btn-dark"
                              title="喷漆">
                          <i class="fa fa-spray-can" title="喷漆"></i>
                      </button>
                      <button id="btnWord" type="button" class="btn btn-dark"
                              title="插入文字">
                          <i class="fa fa-font" title="插入文字"></i>
                      </button>
                      <button id="btnLine" type="button" class="btn btn-dark"
                              title="直线">
                          <i class="fa fa-minus" title="直线"></i>
                      </button>
                      <button id="btnDotted" type="button" class="btn btn-dark"
                              title="虚线">
                          <i class="fa fa-ellipsis-h" title="虚线"></i>
                      </button>
                      <button id="btnArrow" type="button" class="btn btn-dark"
                              title="箭头">
                          <i class="fa fa-long-arrow-alt-right" title="箭头"></i>
                      </button>
                      <button id="btnAngle" type="button" class="btn btn-dark"
                              title="三角形">
                          <i class="fa fa-play" title="三角形"></i>
                      </button>
                      <button id="btnRect" type="button" class="btn btn-dark"
                              title="矩形">
                          <i class="fa fa-square" title="矩形"></i>
                      </button>
                      <button id="btnCircle" type="button" class="btn btn-dark"
                              title="圆形">
                          <i class="fa fa-circle" title="圆形"></i>
                      </button>
                      <button id="btnShape" type="button" class="btn btn-dark"
                              title="图形">
                          <i class="fa fa-shapes" title="图形"></i>
                      </button>
                  </div>
                  <div class="btn-group btn-group-sm ml-sm-4">
                      <button id="btnZoom" type="button" class="btn btn-dark" title="画布放大(鼠标管轮向上&uarr;)">
                          <i class="fa fa-search-plus" title="放大画布(鼠标管轮向上&uarr;)"></i>
                      </button>
                      <button id="btnShrink" type="button" class="btn btn-dark" title="画布缩小(鼠标滚轮向下 &darr;)">
                          <i class="fa fa-search-minus" title="缩小画布(鼠标滚轮向下 &darr;)"></i>
                      </button>
                      <button id="btnCenter" type="button" class="btn btn-dark" title="画布居中">
                          <i class="fa fa-dot-circle" title="居中画布"></i>
                      </button>
                      <div class="btn-group btn-group-sm">
                          <button type="button" class="btn btn-dark dropdown-toggle" data-toggle="dropdown">
                              <i class="fa fa-arrows-alt" title="画布移动"></i>
                          </button>
                          <div class="dropdown-menu p-3">
                              <a id="btnLeft" class="dropdown-item" href="#">
                                  <i class="fa fa-arrow-left"
                                     title="向左移动画布(按键 A 或 &larr;)"></i> 左移(A或&larr;)
                              </a>
                              <a id="btnRight" class="dropdown-item" href="#"> <i class="fa fa-arrow-right"
                                                                                  title="向右移动画布(按键 D 或 &rarr;)"></i> 右移(D或&rarr;)</a>
                              <a id="btnTop" class="dropdown-item" href="#"> <i class="fa fa-arrow-up"
                                                                                title="向上移动画布(按键 W 或 &uarr;)">
                                  上移(W或&uarr;)</i></a>
      
                              <a id="btnBottom" class="dropdown-item" href="#"> <i class="fa fa-arrow-down"
                                                                                   title="向下移动画布(按键 S 或 &darr;)"></i>
                                  下移(S或&darr;)</a>
                              <input id="btnMoveLeftRight" type="range" min="0" max="100" value="30" title="左右移动"
                                     class="custom-range bg-white dropdown-item">
                              <input id="btnMoveTopBottom" type="range" min="0" max="100" value="30" title="上下移动"
                                     class="custom-range bg-white dropdown-item">
                          </div>
                      </div>
                  </div>
                  <div id="toolsBarBack" class="btn-group btn-group-sm ml-sm-4">
                      <button id="btnUndo" type="button" class="btn btn-dark" title="撤销">
                          <i class="fa fa-undo" title="撤销(CTRL + S)"></i>
                      </button>
                      <button id="btnRedo" type="button" class="btn btn-dark" title="恢复">
                          <i class="fa fa-redo" title="恢复(CTRL + Y)"></i>
                      </button>
                      <button id="btnResize" type="button" class="btn btn-dark" title="选中调整">
                          <i class="fa fa-hand-paper" title="选中调整"></i>
                      </button>
                      <button id="btnEraser" type="button" class="btn btn-dark" title="橡皮">
                          <i class="fa fa-eraser" title="橡皮"></i>
                      </button>
                      <button id="btnClean" type="button" class="btn btn-dark" title="删除">
                          <i class="fa fa-trash-alt" title="删除"></i>
                      </button>
                      <button id="btnCut" type="button" class="btn btn-dark" title="抠图-速抠图">
                          <i class="fa fa-cut" title="抠图-速抠图"></i>
                      </button>
                  </div>
              </div>
          </div>
          <div id="centerRowDiv" class="row bg-dark">
              <div id="panelLeft" class="col-2  bg-dark  h-auto  w-100 h-100 pt-0 pr-0 overflow-hidden small">
                  <div class="tab-content p-2  my-bg-dark rounded border-light h-100  w-100 shadow text-white"
                       id="nav-tabContent">
                      <div class="tab-pane rounded h-100 w-100" id="panelFunPage" role="tabpanel">
                          <div class="form-group">
                              <label for="pageSizeDiv">画板尺寸</label>
                              <div id="pageSizeDiv">
                                  <div class=" row">
                                      <div class="col-5 pr-0">
                                          <input id="iptPageSizeWidth" type="range" min="1" value="500"
                                                 class="custom-range">
                                      </div>
                                      <div class="col-2 p-0">
                                      </div>
                                      <div class="col-5 pl-0">
                                          <input id="iptPageSizeHeight" type="range" min="1" value="500"
                                                 class="custom-range">
                                      </div>
                                  </div>
                                  <div class="row">
                                      <div class="col pr-0">
                                          <div class="input-group input-group-sm">
                                              <input id="iptPageSizeWidthVal" type="text" class="form-control"
                                                     value="5"
                                                     oninput="value=value.replace(/[^\d]/g,'')"
                                                     placeholder="宽">
                                              <div class="input-group-append">
                                                  <span class="input-group-text">px</span>
                                              </div>
                                          </div>
                                      </div>
                                      <div class="col-1 text-center p-1">
                                          <i id="pageSizeLock" class="fa fa-lock pointer" title="等比,锁定宽高比例"></i>
                                      </div>
                                      <div class="col pl-0">
                                          <div class="input-group input-group-sm">
                                              <input id="iptPageSizeHeightVal" type="text" class="form-control"
                                                     value="5"
                                                     oninput="value=value.replace(/[^\d]/g,'')"
                                                     placeholder="高">
                                              <div class="input-group-append">
                                                  <span class="input-group-text btn-group-vertical">px</span>
                                              </div>
                                          </div>
      
                                      </div>
                                  </div>
                              </div>
                          </div>
                          <div class="form-group">
                              <label for="pageBackDiv">画板背景颜色</label>
                              <div id="pageBackDiv">
                                  <div class="form-row" id="BackgroundColorDiv" name="cropBackgroundColorDiv">
                                      <div id="inputBgColorSelectDiv" class="select-border">
                                          <div id="inputBgColorSelect">
                                          </div>
                                      </div>
                                      <div color="#ffffff" class="select-border my-select" style="background-color:#ffffff"
                                           title="白色">
                                      </div>
                                      <div color="#38b6ff" class="select-border" style="background-color:#38b6ff" title="淡蓝色">
                                      </div>
                                      <div color="#8c52ff" class="select-border" style="background-color:#8c52ff" title="紫色">
                                      </div>
                                      <div color="#ff66c4" class="select-border" style="background-color:#ff66c4" title="粉色">
                                      </div>
                                      <div color="#7ed957" class="select-border" style="background-color:#7ed957" title="绿色">
                                      </div>
                                      <div color="#c9e265" class="select-border" style="background-color:#c9e265" title="黄绿色">
                                      </div>
                                      <div color="#ffde59" class="select-border" style="background-color:#ffde59" title="黄色">
                                      </div>
                                      <div color="#ffbd59" class="select-border" style="background-color:#ffbd59" title="桃红色">
                                      </div>
                                      <div color="#ff914d" class="select-border" style="background-color:#ff914d" title="橙色">
                                      </div>
                                  </div>
                              </div>
                          </div>
                          <div class="form-group">
                              <label for="pageBackImgDiv">画板背景图片</label>
                              <div id="pageBackImgDiv">
                                  <div class="form-row" id="BackgroundImgDiv" name="cropBackgroundColorDiv">
                                      <div id="inputBgImgSelect" setType="1" class="select-border" title="上传本地图片">
                                          <i class="fa fa-folder-open"></i>
                                      </div>
                                      <input id="bgImgSelectBtn" class="file" accept="image/*" type="file" hidden/>
                                      <div imgSrc="file/background/bg-001.jpg" setType="0"
                                           style="background: url('file/background/bg-001.jpg')"
                                           class="select-border">
                                      </div>
                                      <div imgSrc="file/background/bg-002.jpg" setType="0"
                                           style="background: url('file/background/bg-002.jpg')"
                                           class="select-border">
                                      </div>
                                      <div imgSrc="file/background/bg-003.jpg" setType="0"
                                           style="background: url('file/background/bg-003.jpg')"
                                           class="select-border">
                                      </div>
                                      <div imgSrc="file/background/bg-004.png" setType="0" class="select-border"
                                           style="background: url('file/background/bg-004.png')">
                                      </div>
                                      <div imgSrc="file/background/bg-005.jpg" setType="0"
                                           style="background: url('file/background/bg-005.jpg')"
                                           class="select-border">
                                      </div>
                                      <div imgSrc="file/background/bg-006.jpg" setType="0"
                                           style="background: url('file/background/bg-006.jpg')"
                                           class="select-border">
                                      </div>
                                      <div imgSrc="file/background/bg-009.svg" setType="0"
                                           style="background: url('file/background/bg-009.svg')"
                                           class="select-border">
                                      </div>
                                      <div imgSrc="file/background/bg-007.gif" setType="0"
                                           style="background: url('file/background/bg-007.gif')"
                                           class="select-border">
                                      </div>
                                      <div imgSrc="file/background/bg-008.svg" setType="1"
                                           style="background: url('file/background/bg-008.svg')no-repeat;background-size: 100%"
                                           class="select-border">
                                      </div>
                                  </div>
                                  <div class="form-row pl-1 pr-1">
                                      <div class="custom-control custom-radio custom-control-inline">
                                          <input type="radio" id="rdoBgTile" name="rdoBgImg" value="0"
                                                 checked="checked"
                                                 class="custom-control-input">
                                          <label class="custom-control-label" for="rdoBgTile">平铺</label>
                                      </div>
                                      <div class="custom-control custom-radio custom-control-inline">
                                          <input type="radio" id="rdoBgFill" name="rdoBgImg" value="1"
                                                 class="custom-control-input">
                                          <label class="custom-control-label" for="rdoBgFill">填充</label>
                                      </div>
                                      <div class="custom-control custom-radio custom-control-inline">
                                          <input type="radio" id="rdoBgCenter" name="rdoBgImg" value="2"
                                                 class="custom-control-input">
                                          <label class="custom-control-label" for="rdoBgCenter">居中</label>
                                      </div>
                                  </div>
                                  <div id="iptPageBgImgRow" class="form-row" hidden>
                                      <div class="col-3">
                                          透明度
                                      </div>
                                      <div class="col-9 pl-0">
                                          <input id="iptPageBgImg" type="range" min="0" value="0" max="100"
                                                 class="custom-range">
                                      </div>
                                  </div>
                              </div>
                          </div>
                          <div class="form-group">
                              <label for="CursorColorDiv">画板光标颜色</label>
                              <div id="pageCursorDiv">
                                  <div class="form-row" id="CursorColorDiv" name="cropBackgroundColorDiv">
                                      <div color="black" class="select-border my-select" style="background-color:black"
                                           title="黑色">
                                      </div>
                                      <div color="green" class="select-border" style="background-color:green" title="绿">
                                      </div>
                                      <div color="red" class="select-border" style="background-color:red" title="红">
                                      </div>
                                      <div color="yellow" class="select-border" style="background-color:yellow" title="黄色">
                                      </div>
                                      <div color="blue" class="select-border" style="background-color:blue" title="蓝色">
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                      <div class="tab-pane rounded h-100 w-100" id="panelFunCommon" role="tabpanel">
                          <div class="form-group my-show my-show-pen my-show-spray my-show-word my-show-shape">
                              <label for="form-row-pen" class="my-show my-show-pen my-show-spray">画笔</label>
                              <label for="form-row-pen" class="my-show my-show-shape">填充</label>
                              <div class="form-row my-show my-show-pen my-show-spray" id="form-row-pen">
                                  <div class="col-3">
                                      宽度
                                  </div>
                                  <div class="col-9 pl-0">
                                      <input id="iptPenWidth" type="range" min="1" value="1" max="100" title=""
                                             class="custom-range">
                                  </div>
                              </div>
                              <div class="form-row my-show my-show-word" id="wordFontDiv">
                                  <div class="col">
                                      <select id="selectFontFamily" class="custom-select custom-select-sm"
                                              title="选择字体">
                                          <option selected="selected" value="Microsoft YaHei">微软雅黑</option>
                                          <option value="SimHei">黑体</option>
                                          <option value="SimSun">宋体</option>
                                          <option value="Arial">楷体</option>
                                          <option value="STXingkai">华文行楷</option>
                                          <option value="FZYaoti">方正姚体</option>
                                          <option value="YouYuan">幼圆</option>
                                          <option value="LiSu">隶书</option>
                                          <option value="STLiti">华文隶书</option>
                                          <option value="STCaiyun">华文彩云</option>
                                          <option value="Calibri">Calibri</option>
                                          <option value="Times New Roman">Times New Roman</option>
                                      </select>
                                  </div>
                                  <div class="col">
                                      <select id="selectFontSize" class="custom-select custom-select-sm"
                                              title="选择字号大小">
                                          <option selected="selected" value="16">字号</option>
                                          <option value="6">6</option>
                                          <option value="8">8</option>
                                          <option value="10">10</option>
                                          <option value="12">12</option>
                                          <option value="14">14</option>
                                          <option value="16">16</option>
                                          <option value="18">18</option>
                                          <option value="21">21</option>
                                          <option value="24">24</option>
                                          <option value="28">28</option>
                                          <option value="32">32</option>
                                          <option value="36<">36</option>
                                          <option value="42<">42</option>
                                          <option value="48<">48</option>
                                          <option value="56<">56</option>
                                          <option value="64<">64</option>
                                          <option value="72<">72</option>
                                          <option value="80<">80</option>
                                          <option value="88<">88</option>
                                          <option value="96<">96</option>
                                          <option value="104">104</option>
                                          <option value="120">120</option>
                                          <option value="144">144</option>
                                          <option value="168">168</option>
                                          <option value="200">200</option>
                                          <option value="250">250</option>
                                          <option value="250">300</option>
                                          <option value="350">350</option>
                                          <option value="400">400</option>
                                          <option value="500">500</option>
                                          <option value="600">600</option>
                                      </select>
                                  </div>
                              </div>
                              <div class="form-row my-show my-show-word pt-1">
                                  <div id="fontWeightDiv" class="select-border" title="加粗">
                                      <i class="fa fa-bold"></i>
                                  </div>
                                  <div id="fontStyleDiv" class="select-border" title="斜体">
                                      <i class="fa fa-italic"></i>
                                  </div>
                                  <div id="fontUnderLineDiv" class="select-border" title="下划线">
                                      <i class="fa fa-underline"></i>
                                  </div>
                                  <div id="fontOverLineDiv" class="select-border" title="上划线" style="line-height:normal">
                                      <i class="fa fa-minus"></i>
                                  </div>
                                  <div id="fontThroughLineDiv" class="select-border" title="划线">
                                      <i class="fa fa-minus"></i>
                                  </div>
                              </div>
                              <div class="form-row my-show my-show-word pt-1">
                                  <div class="col-3">
                                      字间距
                                  </div>
                                  <div class="col-9 pl-0">
                                      <input id="rangeFontW" type="range" min="0" value="0" max="800" title=""
                                             class="custom-range">
                                  </div>
                              </div>
                              <div class="form-row my-show my-show-word pt-1">
                                  <div class="col-3">
                                      行间距
                                  </div>
                                  <div class="col-9 pl-0">
                                      <input id="rangeFontH" type="range" min="5" value="5" max="32" title=""
                                             class="custom-range">
                                  </div>
                              </div>
                              <div id="colorDiv" class="my-show my-show-pen my-show-spray my-show-word my-show-shape">
                                  <div class="form-row" id="colorPanel" name="cropBackgroundColorDiv">
                                      <div id="inputColorSelectDiv" class="select-border">
                                          <div id="inputColorSelect">
                                          </div>
                                      </div>
                                      <div color="#38b6ff" class="select-border" style="background-color:#38b6ff"
                                           title="淡蓝色">
                                      </div>
                                      <div color="#8c52ff" class="select-border" style="background-color:#8c52ff"
                                           title="紫色">
                                      </div>
                                      <div color="#cb6ce6" class="select-border" style="background-color:#cb6ce6"
                                           title="紫红色">
                                      </div>
                                      <div color="#7ed957" class="select-border" style="background-color:#7ed957"
                                           title="绿色">
                                      </div>
                                      <div color="#c9e265" class="select-border" style="background-color:#c9e265"
                                           title="黄绿色">
                                      </div>
                                      <div color="#ffde59" class="select-border" style="background-color:#ffde59"
                                           title="黄色">
                                      </div>
                                      <div color="#ff914d" class="select-border" style="background-color:#ff914d"
                                           title="橙色">
                                      </div>
                                      <div color="#ff66c4" class="select-border" style="background-color:#ff66c4"
                                           title="粉色">
                                      </div>
                                      <div color="#000000" class="select-border my-select"
                                           style="background-color:#000000"
                                           title="黑色">
                                      </div>
                                  </div>
                              </div>
                              <div id="colorImgDiv" class="my-show my-show-pen">
                                  <div class="form-row" id="colorImgDivRow" name="cropBackgroundColorDiv">
                                      <div id="inputColorImgSelect" class="select-border" title="上传本地图片">
                                          <i class="fa fa-folder-open"></i>
                                      </div>
                                      <input id="colorImgSelectBtn" class="file" accept="image/*" type="file" hidden/>
                                      <div imgSrc="file/pen/color.jpg" class="select-border"
                                           style="background: url('file/pen/color.jpg')">
                                      </div>
                                      <div imgSrc="file/pen/pen-001.gif"
                                           style="background: url('file/pen/pen-001.gif')"
                                           class="select-border">
                                      </div>
                                      <div imgSrc="file/pen/pen-002.gif"
                                           style="background: url('file/pen/pen-002.gif')"
                                           class="select-border">
                                      </div>
                                      <div imgSrc="file/pen/pen-003.gif"
                                           style="background: url('file/pen/pen-003.gif')"
                                           class="select-border">
                                      </div>
                                  </div>
                              </div>
                          </div>
                          <div class="form-group my-show my-show-word">
                              <label for="shadowDivWrap">背景</label>
                              <div id="fontBkDivWrap">
                                  <div class="form-row">
                                      <div id="fontBkColorSelectDiv" class="select-border">
                                          <div id="fontBkColorSelect">
                                          </div>
                                      </div>
                                      <div color="#ff66c4" class="select-border" style="background-color:#ff66c4"
                                           title="粉色">
                                      </div>
                                      <div color="#7ed957" class="select-border" style="background-color:#7ed957" title="绿色">
                                      </div>
                                      <div color="#ffde59" class="select-border" style="background-color:#ffde59"
                                           title="黄色">
                                      </div>
                                      <div color="#5ce1e6" class="select-border" style="background-color:#5ce1e6"
                                           title="青色">
                                      </div>
                                  </div>
                              </div>
                          </div>
                          <div class="form-group my-show my-show-word my-show-shape">
                              <label class="my-show my-show-word">字边</label>
                              <label class="my-show my-show-shape">边框</label>
                              <div class="form-row">
                                  <div class="col-3">
                                      边框宽
                                  </div>
                                  <div class="col-9 pl-0">
                                      <input id="fontBorder" type="range" min="0" value="0" max="100"
                                             class="custom-range">
                                  </div>
                              </div>
                              <div id="fontBorderDivWrap">
                                  <div class="form-row">
                                      <div id="fontBorderColorSelectDiv" class="select-border">
                                          <div id="fontBorderColorSelect">
                                          </div>
                                      </div>
                                      <div color="#ff66c4" class="select-border" style="background-color:#ff66c4"
                                           title="粉色">
                                      </div>
                                      <div color="#7ed957" class="select-border" style="background-color:#7ed957" title="绿色">
                                      </div>
                                      <div color="#ffde59" class="select-border" style="background-color:#ffde59"
                                           title="黄色">
                                      </div>
                                      <div color="#5ce1e6" class="select-border" style="background-color:#5ce1e6"
                                           title="青色">
                                      </div>
                                  </div>
                              </div>
                          </div>
                          <div class="form-group my-show my-show-pen my-show-spray my-show-word my-show-shape">
                              <label for="shadowDivWrap">阴影</label>
                              <div class="form-row" id="shadowDiv">
                                  <div class="col-3">
                                      影宽度
                                  </div>
                                  <div class="col-9 pl-0">
                                      <input id="iptShadowWidth" type="range" min="0" value="0" max="50"
                                             class="custom-range">
                                  </div>
                              </div>
                              <div class="form-row">
                                  <div class="col-3">
                                      偏移量
                                  </div>
                                  <div class="col-9 pl-0">
                                      <input id="rangOffset" type="range" min="0" value="0" max="50"
                                             class="custom-range">
                                  </div>
                              </div>
                              <div id="shadowDivWrap">
                                  <div class="form-row">
                                      <div id="shadowColorSelectDiv" class="select-border">
                                          <div id="shadowColorSelect">
                                          </div>
                                      </div>
                                      <div color="#ff66c4" class="select-border" style="background-color:#ff66c4"
                                           title="粉色">
                                      </div>
                                      <div color="#7ed957" class="select-border" style="background-color:#7ed957" title="绿色">
                                      </div>
                                      <div color="#ffde59" class="select-border" style="background-color:#ffde59"
                                           title="黄色">
                                      </div>
                                      <div color="#5ce1e6" class="select-border" style="background-color:#5ce1e6"
                                           title="青色">
                                      </div>
                                  </div>
                              </div>
                          </div>
                          <div class="form-group my-show my-show-resize">
                              <div class="form-row p-1">
                                  <div class="btn-group btn-group-sm w-100">
                                      <button id="btnFlipX" type="button" class="btn btn-dark"
                                              title="水平翻转">
                                          <i class="fa fa-arrows-alt-h" title="水平翻转"></i>
                                      </button>
                                      <button id="btnFlipY" type="button" class="btn btn-dark"
                                              title="垂直翻转">
                                          <i class="fa fa-arrows-alt-v" title="垂直翻转"></i>
                                      </button>
                                      <button id="btnIndexLast" type="button" class="btn btn-dark"
                                              title="层级移到最后">
                                          <i class="fa fa-angle-down" title="层级移到最后"></i>
                                      </button>
                                      <button id="btnIndexForefront" type="button" class="btn btn-dark"
                                              title="层级移到最前">
                                          <i class="fa fa-angle-up" title="层级移到最前"></i>
                                      </button>
                                      <button id="btnIndexDown" type="button" class="btn btn-dark"
                                              title="层级向后">
                                          <i class="fa fa-angle-double-down" title="层级向后"></i>
                                      </button>
                                      <button id="btnIndexUp" type="button" class="btn btn-dark"
                                              title="层级向前">
                                          <i class="fa fa-angle-double-up" title="层级向前"></i>
                                      </button>
                                  </div>
                              </div>
                              <div class="form-row p-1">
                                  <div class="btn-group btn-group-sm w-100">
                                      <button id="btnGroup" type="button" class="btn btn-dark"
                                              title="成组">
                                          <i class="fa fa-object-group" title="成组"></i>
                                      </button>
                                      <button id="btnUnGroup" type="button" class="btn btn-dark"
                                              title="取消成组">
                                          <i class="fa fa-object-ungroup" title="取消成组"></i>
                                      </button>
                                      <button id="btnCopy" type="button" class="btn btn-dark"
                                              title="复制">
                                          <i class="fa fa-copy" title="复制"></i>
                                      </button>
                                      <button id="btnDel" type="button" class="btn btn-dark"
                                              title="删除">
                                          <i class="fa fa-trash" title="删除"></i>
                                      </button>
                                  </div>
                              </div>
                              <div class="form-row p-1">
                                  <div class="col-4">
                                      横向翻转
                                  </div>
                                  <div class="col-8 pl-0">
                                      <input id="rangeScaleX" type="range" min="-100" value="100" max="100"
                                             class="custom-range">
                                  </div>
                              </div>
                              <div class="form-row p-1">
                                  <div class="col-4">
                                      纵向翻转
                                  </div>
                                  <div class="col-8 pl-0">
                                      <input id="rangeScaleY" type="range" min="-100" value="100" max="100"
                                             class="custom-range">
                                  </div>
                              </div>
                              <div class="form-row p-1">
                                  <div class="col-4">
                                      横向拉伸
                                  </div>
                                  <div class="col-8 pl-0">
                                      <input id="rangeSkewX" type="range" min="-300" value="0" max="300"
                                             class="custom-range">
                                  </div>
                              </div>
                              <div class="form-row p-1">
                                  <div class="col-4">
                                      纵向拉伸
                                  </div>
                                  <div class="col-8 pl-0">
                                      <input id="rangeSkewY" type="range" min="-300" value="0" max="300"
                                             class="custom-range">
                                  </div>
                              </div>
                          </div>
                          <div class="form-group my-show my-show-resize">
                              <label>圆角</label>
                              <div class="form-row">
                                  <div class="col-4">
                                      横向边角
                                  </div>
                                  <div class="col-8 pl-0">
                                      <input id="rangeAngleX" type="range" min="0" value="0" max="150"
                                             class="custom-range">
                                  </div>
                              </div>
                              <div class="form-row">
                                  <div class="col-4">
                                      纵向边角
                                  </div>
                                  <div class="col-8 pl-0">
                                      <input id="rangeAngleY" type="range" min="0" value="0" max="150"
                                             class="custom-range">
                                  </div>
                              </div>
                          </div>
                      </div>
                  </div>
              </div>
              <div id="panelCenter" class="col-9 h-100 overflow-hidden">
                  <div id="panelDrawDiv" class="position-relative rounded shadow bg-secondary w-100 h-100 overflow-hidden">
                      <!--note-->
                      <div id="panelDrawNotes"
                           class="position-absolute p-3 w-100 m-0 h-100 overflow-hidden my-sm-overflow-scroll">
                          <div class="row">
                              <div class="col-sm-7">
                                  <div class="card bg-dark text-white shadow-lg">
                                      <div class="card-body h-100 overflow-hidden">
                                          <h5 class="card-title">速写板 suxieban.com</h5>
                                          <p class="card-text">让手写、画图更快捷高效
                                          </p>
                                          <p><i class="fa fa-user-astronaut"></i> <b>支持超清图片、SVG图片、编辑文件</b>生成及导入(推荐谷歌chrome浏览器)。
                                          </p>
                                          <p><i class="fa fa-user-secret"></i><b> 隐私保护</b>: 全部操作均在您本地设备完成,<b>不会上传</b> 至
                                              服务器及网络。</p>
                                          <p><i class="fa fa-seedling"></i> 有一种意境,总会在晨风吹拂中,让我们领悟到人生的坚强。</p>
                                          <div class="row text-center">
                                              <div class="col-3">
                                                  <a href="#" class="btn rounded-pill btn-dark border-secondary btn-start"
                                                     title="开始创作"
                                                     data-trigger="focus"> <i class="fa fa-tablet-alt text-warning"></i>
                                                      速写板</a>
                                              </div>
                                              <div class="col-3">
                                                  <a href="https://www.sukoutu.com" target="_blank"
                                                     class="btn rounded-pill btn-dark border-secondary file-btn">
                                                      <i
                                                              class="fa fa-crop text-warning"></i> 速抠图</a>
                                              </div>
                                              <div class="col-3">
                                                  <a href="#" class="btn rounded-pill btn-dark border-secondary"
                                                     data-toggle="popover" data-html="true" data-placement="top"
                                                     title="速拼图 supintu.com"
                                                     data-trigger="focus"
                                                     style="border-style: dashed"
                                                     data-content="速拼图 是一款正在研发中的在线图片设计及拼合工具,快捷高效的帮您制作并拼合成精美的图片。届时 速拼图 与 速抠图 协同作为图片处理的双引擎 将成为您的左膀右臂。<span class='badge badge-primary'>请扫一扫关注</span><div class='text-center'><img class='w-50' src='file/weixin_suxieban.jpg'/></div>"
                                                  > <i class="fa fa-image"></i> 速拼图</a>
                                              </div>
                                              <div class="col-3">
                                                  <a href="#" class="btn rounded-pill btn-dark border-secondary"
                                                     data-toggle="popover" data-html="true" data-placement="top"
                                                     title="速设计 susheji.com"
                                                     data-trigger="focus"
                                                     style="border-style: dashed"
                                                     data-content="速设计 是一款待研发的在线产品方案设计工具,基于素材库,快捷高效的帮您设计、制作并分享方案。感谢您的支持。<span class='badge badge-primary'>请扫一扫关注</span><div class='text-center'><img class='w-50' src='file/weixin_suxieban.jpg'/></div>"
                                                  > <i class="fa fa-pencil-alt"></i> 速设计
                                                  </a>
                                              </div>
                                          </div>
                                          <div class="row mt-3 text-center">
                                              <div class="col">
                                                  <a href="#"
                                                     class="btn btn-block rounded btn-dark border-secondary btn-start">
                                                      开始创作
                                                  </a>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                              <div class="col-sm-5 mt-1 mt-sm-0 pl-sm-0  ">
                                  <div class="card bg-dark text-white shadow-lg h-100 ">
                                      <div class="card-body p-1 h-100 overflow-hidden">
                                          <div class="divAds">
                                              <!--                                        <script async-->
                                              <!--                                                src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>-->
                                              <!--                                        <ins class="adsbygoogle"-->
                                              <!--                                             style="display:block"-->
                                              <!--                                             data-ad-client="ca-pub-8551674815797939"-->
                                              <!--                                             data-ad-slot="4924605572"-->
                                              <!--                                             data-ad-format="auto"-->
                                              <!--                                             data-full-width-responsive="true"></ins>-->
                                              <!--                                        <script>-->
                                              <!--                                            (adsbygoogle = window.adsbygoogle || []).push({});-->
                                              <!--                                        </script>-->
                                          </div>
                                      </div>
                                  </div>
                              </div>
                          </div>
                          <div class="row mt-3">
                              <div class="col-sm-7">
                                  <div class="card bg-dark text-white shadow h-100">
                                      <div class="card-body text-center">
                                          <h5 class="card-title">微信扫一扫,手机使用 <span class="text-warning">速抠图、速写板、速拼图、速设计</span>。
                                          </h5>
                                          <div class="card-text">
                                              <img style="width: 7rem; height: 7rem;" src='file/weixin_suxieban.jpg'/>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                              <div class="col-sm-5 mt-1 mt-sm-0 pl-sm-0 my-sm-hide ">
                                  <div class="card bg-dark text-white shadow-lg h-100 ">
                                      <div class="card-body p-1 h-100 overflow-hidden">
                                          <div class="row">
                                              <div class="col-sm-4">
                                                  <div class="card bg-secondary">
                                                      <div class="card-body text-center">
                                                          <img class="card-img-top" src="file/ads/tb_01.jpg"
                                                               alt="小米米家液晶小黑板|手写板|画图|画画"/>
                                                          <br/>
                                                          <a href="https://s.click.taobao.com/TgWKcov" target="_blank"
                                                             class="mt-2 btn btn-sm btn-dark border-secondary">进入店铺</a>
                                                      </div>
                                                  </div>
                                              </div>
                                              <div class="col-sm-4">
                                                  <div class="card bg-secondary">
                                                      <div class="card-body text-center">
                                                          <img class="card-img-top" src="file/ads/tb_02.jpg"
                                                               alt="超大号儿童画画板磁性写字板"/>
                                                          <br/>
                                                          <a href="https://s.click.taobao.com/xex9cov" target="_blank"
                                                             class="mt-2 btn btn-sm btn-dark border-secondary">进入店铺</a>
                                                      </div>
                                                  </div>
                                              </div>
                                              <div class="col-sm-4">
                                                  <div class="card bg-secondary">
                                                      <div class="card-body text-center">
                                                          <img class="card-img-top" src="file/ads/tb_03.jpg"
                                                               alt="儿童液晶手写板宝宝涂鸦板绘画画板电子光能彩色写字板家用小黑板"/>
                                                          <br/>
                                                          <a href="https://s.click.taobao.com/klg6cov" target="_blank"
                                                             class="mt-2 btn btn-sm btn-dark border-secondary">进入店铺</a>
                                                      </div>
                                                  </div>
                                              </div>
                                          </div>
                                      </div>
                                  </div>
                              </div>
                              <!--                        <div class="col-sm-5 mt-1 mt-sm-0 ">-->
                              <!--                            <div class="card bg-dark text-white shadow-lg h-100 ">-->
                              <!--                                <div class="card-body p-1 h-100 overflow-hidden">-->
                              <!--                                    <a href="https://ac.aliyun.com/pages/bkshare?userCode=cqhx2s4t" target="_blank">-->
                              <!--                                        <img class="w-100 h-100" src="file/ads/640-119.png">-->
                              <!--                                    </a>-->
                              <!--                                </div>-->
                              <!--                            </div>-->
                              <!--                        </div>-->
                          </div>
                      </div>
                      <div id="panelDiv" class="bg-light">
                          <canvas class="w-100 h-100 paper" id="panel"></canvas>
                      </div>
                  </div>
                  <!--菜单把手-->
                  <div id="leftSlider" class="position-absolute rounded-right text-white"
                       style="width: 32px;height: 112px; left: 0%; top: 50%; margin-top: -56px; margin-left: -17px">
                      <svg id="panelFunsliderIcon" cursor="pointer" width="32" height="112"
                           xmlns="http://www.w3.org/2000/svg">
                          <g>
                              <title></title>
                              <rect fill="none" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
                          </g>
                          <g>
                              <title></title>
                              <path fill="#1b1e21"
                                    d="m22.626,17.865l-1.94,-1.131c-3.002,-1.753 -4.686,-4.126 -4.686,-6.601l0,-10.133l-16,0l0,112l16,0l0,-10.135c0,-2.475 1.684,-4.849 4.686,-6.6l1.94,-1.131c6.002,-3.502 9.374,-8.249 9.374,-13.2l0,-49.87c0,-4.95 -3.372,-9.698 -9.374,-13.199"/>
                              <text font-weight="bold" xml:space="preserve" text-anchor="start"
                                    font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_2" y="63"
                                    x="17.28125" stroke-width="0" stroke="#000" fill="#e5e5e5">||</text>
                          </g>
                      </svg>
                  </div>
                  <div id="rightSlider" class="position-absolute rounded-right text-white"
                       style="width: 32px;height: 112px; right: 0%; top: 50%; margin-top: -56px; margin-right: -17px">
                      <svg id="panelFunsliderIcon" cursor="pointer" width="32" height="112"
                           style="transform: rotate(180deg);"
                           xmlns="http://www.w3.org/2000/svg">
                          <g>
                              <title></title>
                              <rect fill="none" id="canvas_background" height="402" width="582" y="-1" x="-1"/>
                          </g>
                          <g>
                              <title></title>
                              <path fill="#1b1e21"
                                    d="m22.626,17.865l-1.94,-1.131c-3.002,-1.753 -4.686,-4.126 -4.686,-6.601l0,-10.133l-16,0l0,112l16,0l0,-10.135c0,-2.475 1.684,-4.849 4.686,-6.6l1.94,-1.131c6.002,-3.502 9.374,-8.249 9.374,-13.2l0,-49.87c0,-4.95 -3.372,-9.698 -9.374,-13.199"/>
                              <text font-weight="bold" xml:space="preserve" text-anchor="start"
                                    font-family="Helvetica, Arial, sans-serif" font-size="24" id="svg_2" y="63"
                                    x="17.28125" stroke-width="0" stroke="#000" fill="#e5e5e5">||</text>
                          </g>
                      </svg>
                  </div>
              </div>
              <div id="panelRight" class="col-1  bg-dark  h-auto  w-100 h-100 pt-0 pl-0 overflow-hidden">
                  <div class="my-bg-dark h-100 rounded p-2">
                      <div id="svgPanel" class="form-row my-sm-hide">
                          <div class="select-border-sm my-select  bgImgFill" title="直角三角形"
                               style="background-image: url('file/shape/angle.svg')"></div>
                          <div class="select-border-sm my-select  bgImgFill" title="平行四边形"
                               style="background-image: url('file/shape/four.svg')"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/trapezoid.svg')"
                               title="梯形"></div>
                          <div class="select-border-sm my-select  bgImgFill" title="五边形"
                               style="background-image: url('file/shape/five.svg')"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/six.svg')"
                               title="六边形"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/eight.svg')"
                               title="八边形"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/ten.svg')"
                               title="十边形"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/circle-point.svg')"
                               title="空心圆"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/cylinder.svg')"
                               title="圆柱形"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/star.svg')"
                               title="五角星"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/heart.svg')"
                               title="心形"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/tip-one.svg')"
                               title="提示"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/tip-02.svg')"
                               title="提示"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/tip-03.svg')"
                               title="提示"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/tip-04.svg')"
                               title="提示"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/arrow-01.svg')"
                               title="箭头"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/arrow-02.svg')"
                               title="箭头"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/arrow-03.svg')"
                               title="箭头"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/arrow-04.svg')"
                               title="箭头"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/arrow-08.svg')"
                               title="箭头"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/arrow-07.svg')"
                               title="箭头"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/arrow-15.svg')"
                               title="箭头"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/arrow-09.svg')"
                               title="箭头"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/arrow-14.svg')"
                               title="箭头"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/arrow-10.svg')"
                               title="箭头"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/arrow-06.svg')"
                               title="箭头"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/arrow-05.svg')"
                               title="箭头"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/arrow-11.svg')"
                               title="箭头"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/arrow-12.svg')"
                               title="箭头"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/arrow-13.svg')"
                               title="箭头"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/shape-03.svg')"
                               title="flowchart"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/shape-02.svg')"
                               title="flowchart"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/shape-05.svg')"
                               title="flowchart"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/shape-06.svg')"
                               title="flowchart"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/shape-07.svg')"
                               title="flowchart"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/shape-08.svg')"
                               title="flowchart"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/shape-04.svg')"
                               title="flowchart"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/shape-09.svg')"
                               title="flowchart"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/shape-11.svg')"
                               title="flowchart"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/shape-14.svg')"
                               title="flowchart"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/shape-04.svg')"
                               title="flowchart"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/other-02.svg')"
                               title="flowchart"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/shape-01.svg')"
                               title="flowchart"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/other-one.svg')"
                               title="复杂图形"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/note.svg')"
                               title="便签"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/note.svg')"
                               title="便签"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/note.svg')"
                               title="便签"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/obj-01.svg')"
                               title="其他"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/obj-02.svg')"
                               title="其他"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/obj-03.svg')"
                               title="其他"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/obj-04.svg')"
                               title="其他"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/obj-05.svg')"
                               title="其他"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/obj-06.svg')"
                               title="其他"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/obj-07.svg')"
                               title="其他"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/obj-08.svg')"
                               title="其他"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/obj-09.svg')"
                               title="其他"></div>
                          <div class="select-border-sm bgImgFill" style="background-image: url('file/shape/obj-10.svg')"
                               title="其他"></div>
                      </div>
                  </div>
              </div>
          </div>
          <div id="bottomRowDiv" class="row bg-dark">
              <p class="col mx-auto text-secondary m-0 text-center text-sm-right text-sm-right"
                 style="font-size:12px; line-height:1rem">
                  &copy;2019 SUXIEBAN |
                  <a class="text-secondary"
                     href="http://www.beian.miit.gov.cn"
                     target="_blank">京ICP备19019995号-5</a>
                  | <a class="text-secondary" href="page/note/statement.html"
                       target="_blank">免责声明 </a>
              </p>
          </div>
          <div class="modal fade bd-example-modal" tabindex="-1" role="dialog" id="modalInfo">
              <div class="modal-dialog modal-dialog-centered">
                  <div class="modal-content">
                      <div class="modal-header">
                          <h5 class="modal-title">消息提示</h5>
                          <button type="button" class="close" data-dismiss="modal">&times;</button>
                      </div>
                      <div class="modal-body">
                      </div>
                      <div class="modal-footer">
                          <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
                      </div>
                  </div>
              </div>
          </div>
          <div class="modal fade bd-example-modal" tabindex="-1" role="dialog" id="modalConfirm">
              <div class="modal-dialog modal-dialog-centered">
                  <div class="modal-content">
                      <div class="modal-header">
                          <h5 class="modal-title">确认提示</h5>
                          <button type="button" class="close" data-dismiss="modal">&times;</button>
                      </div>
                      <div class="modal-body">
                      </div>
                      <div class="modal-footer">
                          <button type="button" class="btn sure btn-primary" data-dismiss="modal">确定
                          </button>
                          <button type="button" class="btn cancel btn-secondary" data-dismiss="modal">取消</button>
                      </div>
                  </div>
              </div>
          </div>
          <div class="modal fade bd-example-modal p-0 m-0" tabindex="-1" role="dialog" id="modalIframe">
              <div class="modal-dialog  my-mode-iframe p-0 m-0 w-100 h-100 modal-dialog-centered">
                  <div class="modal-content h-100  p-0 m-0">
                      <div class="modal-header p-1 m-0 overflow-hidden">
                          <h6 class="modal-title">速抠图 <a href="https://www.sukoutu.com" target="_blank">sukoutu.com</a></h6>
                          <button type="button" class="close" data-dismiss="modal">&times;</button>
                      </div>
                      <div class="modal-body p-0 m-0 h-100 overflow-hidden">
                          <iframe class="w-100 h-100 border-0 p-0 m-0">
                          </iframe>
                      </div>
                  </div>
              </div>
          </div>
          <div class="modal fade bd-example-modal" tabindex="-1" role="dialog" id="saveShow">
              <div class="modal-dialog modal-xl modal-dialog-centered" role="document">
                  <div class="modal-content">
                      <div class="modal-header">
                          <h5 class="modal-title">图片保存</h5>
                          <button type="button" class="close" data-dismiss="modal">&times;</button>
                      </div>
                      <div class="modal-body mx-auto" style="text-align: center;">
                      </div>
                  </div>
              </div>
          </div>
          <div id="rightMenu" class="position-absolute w-auto h-auto">
              <span id="rightMenuBtn" data-toggle="dropdown">
          </span>
              <div id="rightMenuCon" class="dropdown-menu dropdown-menu-left">
                  <a id="btnMenuCopy" class="dropdown-item" href="#" title="复制">
                      <i class="fa fa-copy"></i> 复制
                  </a>
                  <a id="btnMenuDel" class="dropdown-item" href="#">
                      <i class="fa fa-trash-alt" title="删除"></i> 删除
                  </a>
                  <div class="dropdown-divider"></div>
                  <a id="btnMenuIndexLast" class="dropdown-item" href="#">
                      <i class="fa fa-angle-double-down" title="层级移到最后"></i> 移到最后
                  </a>
                  <a id="btnMenuIndexForefront" class="dropdown-item" href="#">
                      <i class="fa fa-angle-double-up" title="层级移到最前"></i> 移到最前
                  </a>
                  <a id="btnMenuIndexDown" class="dropdown-item" href="#">
                      <i class="fa fa-angle-down" title="层级向后"></i> 后移
                  </a>
                  <a id="btnMenuIndexUp" class="dropdown-item" href="#">
                      <i class="fa fa-angle-up" title="层级向前"></i> 前移
                  </a>
                  <div class="dropdown-divider"></div>
                  <a id="btnMenuFlipY" class="dropdown-item" href="#">
                      <i class="fa fa-arrows-alt-v" title="垂直翻转"></i>&nbsp;&nbsp; 垂直翻转
                  </a>
                  <a id="btnMenuFlipX" class="dropdown-item" href="#">
                      <i class="fa fa-arrows-alt-h" title="水平翻转"></i> 水平翻转
                  </a>
                  <div class="dropdown-divider"></div>
                  <a id="btnOtherOptionSet" class="dropdown-item" href="#">
                      <i class="fa fa-hand-paper" title="其他操作"></i> 其他操作
                  </a>
              </div>
          </div>
      </div>
      
      <!--module.js-->
      <!-- Global site tag (gtag.js) - Google Analytics -->
      <script async src="https://www.googletagmanager.com/gtag/js?id=UA-149577290-3"></script>
      <script>
          window.dataLayer = window.dataLayer || [];
      
          function gtag() {
              dataLayer.push(arguments);
          }
      
          gtag('js', new Date());
      
          gtag('config', 'UA-149577290-3');
      </script>
      
      <script>
          var _hmt = _hmt || [];
          (function () {
              var hm = document.createElement("script");
              hm.src = "https://hm.baidu.com/hm.js?826c77ed110cd3269fab003ea90490ae";
              var s = document.getElementsByTagName("script")[0];
              s.parentNode.insertBefore(hm, s);
          })();
      </script>
      <script>
          (function (b, a, e, h, f, c, g, s) {
              b[h] = b[h] || function () {
                  (b[h].c = b[h].c || []).push(arguments)
              };
              b[h].s = !!c;
              g = a.getElementsByTagName(e)[0];
              s = a.createElement(e);
              s.src = "//s.union.360.cn/" + f + ".js";
              s.defer = !0;
              s.async = !0;
              g.parentNode.insertBefore(s, g)
          })(window, document, "script", "_qha", 336288, false);
      </script>
      </body>
      </html>
      

       

    展开全文
  • 对于作家,往往在不经意间,在... 对于儿童,小孩子很多都喜欢涂涂画画,而这些涂涂画画对于培养孩子的创造力和想象力以及兴趣爱好都是有很大帮助的。作为父母,又会有一些顾虑,因为涂鸦存在一些风险。对于年龄...
  • 相当于同时拥有了儿童绘画板、数位板、 临摹板、字帖、留言板 等等... 想怎么用就怎么用,随时都能派上用场, 不会被闲置,这性价比真的没谁了! 还有哪里不懂的,甩个视频给你—— 这么好用的写字板, 你怎么能错过...
  • Draw_flower.zip

    2021-12-04 11:22:12
    齿轮画板可以画出炫丽的对称图案,这是一个Python实现,可以调节多个参数,让孩子尝试不同参数变化无穷的乐趣!还可以保存脚本,以及再次运行保存的脚本。也是很好的Python初学者的参考示例。
  • 画板

    2019-10-06 10:19:12
    项目描述:本产品是一款绘图软件,专为儿童打造的画画应用.可充分发挥孩子们的创造力,让孩子们通过自己的小手在画布上尽情创作出自己的画作. 应用包括小画板,保存所画图像,分享画作等模块。 主要技术:使用手势捕捉...
  • 画板画图软件是一款专业实用的绘图工具应用,画板画图app直接提供有全面的绘图工具,真实模拟笔刷墨迹,可以自由创建多图层绘画,并且画板画图软件还提供多种图形元素。软件介绍画板画图软件是一款专业的具有绘图、...
  • 前言大家好,我是菜鸟小白。明天就是一年一度的六一儿童节,虽然我们早已过了那个年纪,但是不妨碍我们拥有一颗年轻的过节心呀。那今天我们通过学习python的Turtle库来画一个哆...
  • ※※※ 本文已累计帮助几百位家长买到喜欢的儿童书桌椅,始终坚持观点统一,相关文章同质化过于严重,这篇文章不打算再说废话,只为把儿童书桌椅的选购要点讲清楚。 本文涉及推荐,如果不感兴趣,建议不要浪费你...
  • 寒假结束,开学季到来,学习用品相关消费又将迎来一个小高潮,儿童学习桌堪称相关品类中的“大件儿”。 2月25日,第一财经商业数据中心(CBNData)联合天猫发布《天猫美家儿童学习桌行业趋势研究》(下简称《研究》),...
  • 选色工具练习.sb2

    2019-10-09 16:02:24
    儿童游戏编程开发软件scratch简易教程《选色工具练习》
  • 你可以再为画板添加一个调整铅笔粗度的功能。 动手清单: (4.1)步骤1:添加“笔粗”变量。 【具体操作】选中“数据”选项卡 → 点击“新建变量” → 点击 确定。下图所示。 (4.2)步骤2:将“笔粗”变量添加到...
  • 今日使用了一款叫做《汉字王国》的儿童软件。 1.1《汉字王国》界面 软件中有一个功能,叫做“涂呀涂呀”,界面是很可爱的儿童绘画板。 一开始如同玩“岛屿”里的游戏一样,我想要明确规则后再进行操作。看了...
  • 又名: Microsoft Windows CE Programming 作者: [美]Douglas / Boling译者: 北京博彦科技发展有限公司ISBN: 9787301041864 页数: 746定价: 99.0出版社: 北京大学出版社装帧: 平装出版

空空如也

空空如也

1 2 3 4 5 ... 14
收藏数 261
精华内容 104
热门标签
关键字:

儿童画板