<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8">

  <title>pixi</title>

  <script src="../js/pixi.min.js"></script>

</head>

<body>

<script type="text/javascript">

  //Create a Pixi Application

  let app = new PIXI.Application({width: 526, height: 526,antialias:true});

  document.body.appendChild(app.view);

  // 设置背景颜色

  app.renderer.backgroundColor = 0xcccccc;

  // 更改画布大小

  // app.renderer.autoResize =true;

  //  app.renderer.resize(256,256)

  // app.renderer.width / app.renderer.height

  // 创建画笔

  let graphics = new PIXI.Graphics();

  // 填充颜色及画一个矩形区域

  graphics.beginFill(0xcccccc);

  graphics.drawRect(0,0,app.renderer.width,app.renderer.height);

   graphics.lineStyle(14, 0xffd900); //边框色
  // 初始坐标

  var lastPoint= {x:0, y:0};

  // 是否按下去

  var isMouse =false;

//  graphics.buttonMode = true;

  // 交互行为

  graphics.interactive = true;

  app.stage.addChild(graphics);

  // 绑定事件

  graphics.on('mousedown' ,onmousedown);

  graphics.on('mouseup' ,onmouseup);

  graphics.on('mousemove' ,onmousemove);

  graphics.on('mouseout' ,onmouseoutFun);

 function onmousedown(event){

   console.log(event)

   this.data = event.data;

   var initPosition = this.data.getLocalPosition(this.parent); //获取鼠标移动的位置

   console.log(initPosition.x +"-----"+initPosition.y);

   // 更新坐标点

   lastPoint = initPosition;

   isMouse = true;

 }

  function onmouseup(){

    isMouse = false;

    this.data = null;

  }

  function onmouseoutFun(){

    if(isMouse == true){

      isMouse = false;

      this.data = null;

      console.log('移除')

    }

  }

  function onmousemove(event){

    if(isMouse == true){

      var newPosition = this.data.getLocalPosition(this.parent); //获取鼠标移动的位置

//      console.log(newPosition)

      // 绘画线条

      graphics.moveTo(lastPoint.x,lastPoint.y);

      graphics.lineTo(newPosition.x, newPosition.y);

      graphics.endFill();

      // 更新坐标点

      lastPoint = newPosition;

    }

  }

  // 保存图片

  function downloadImg(){

    const image = app.renderer.plugins.extract.image(graphics);

    document.body.appendChild(image);

  }

</script>

<a href="../img/1.png" download="test">aaa</a>

</body>

</html>

存在问题：

当画笔宽度设置大，书写会有明显的锯齿。。。目前还没有处理。　　

PIXI 写一个字及图片保存（2）的更多相关文章

  1. canvas学写一个字

    第一步:画一个米字格,先画一个矩形,再画中间的米字. <script> window.onload = function(){ var canvas = document.getEleme ...

  2. 使用iScroll和photoswipe写手机浏览图片的插件的几点经验

    首先,当我知道我得到一个任务需要写一个在手机上能浏览图片的插件时,我第一想到了iScroll.它的左右滑动,上下滑动的效果在安卓手机上也能让用户有良好的体验,自己写也能方便控制. 我的需求是,插件要能 ...

  3. 24位和8位BMP图片保存纯C代码

    BMP图片大家都知道,可以通过查看BMP图片结构使用纯C就可以打开,编辑,处理,保存图片.非常方便使用. 具体BMP结构可以参考:wingdi.h头文件.今天主要在进行删减代码,需要把多余的代码删除, ...

  4. 使用Emacs中的org-mode写cnblogs之图片插入

    .title { text-align: center; margin-bottom: .2em } .subtitle { text-align: center; font-size: medium ...

  5. .NET压缩图片保存 .NET CORE WebApi Post跨域提交 C# Debug和release判断用法 tofixed方法 四舍五入 (function($){})(jQuery); 使用VUE+iView+.Net Core上传图片

    .NET压缩图片保存   需求: 需要将用户后买的图片批量下载打包压缩,并且分不同的文件夹(因:购买了多个用户的图片情况) 文章中用到了一个第三方的类库,Nuget下载 SharpZipLib 目前用 ...

  6. canvas知识03：学写一个字案例

    效果

  7. 2018-5-22-SublimeText-粘贴图片保存到本地

    title author date CreateTime categories SublimeText 粘贴图片保存到本地 lindexi 2018-05-22 15:15:26 +0800 2018 ...

  8. php 获取远程图片保存到本地

    php 获取远程图片保存到本地 使用两个函数 1.获取远程文件 2.把图片保存到本地 /** * 获取远程图片并把它保存到本地 * $url 是远程图片的完整URL地址,不能为空. */ functi ...

  9. 用qt代码怎样编写图片保存格式[qt4.6]

    用qt代码怎样编写图片保存格式 qt提供了多个保存图片的接口,比较常用的接口如下 bool QPixmap::save ( const QString & fileName, const ch ...

随机推荐

  1. 算法Sedgewick第四版-第1章基础-015一stack只保留last指针

    /************************************************************************* * * A generic queue, impl ...

  2. C语言访问网页

    一.理论 http://www.zixue7.com/thread-3860-1-1.html

  3. R: 用 R 查看、管理文件(夹)

    文件管理主要函数: list.files( ): 查看当前目录下文件. file.show( ): 显示文件. file.access( ): 查看文件是否可读可写. file.create( ): ...

  4. ZROI2018提高day9t1

    传送门 分析 我们首先想到的自然是根据大小关系建图,在这之后我们跑一遍拓扑排序 但是由于l和r的限制关系我们需要对传统的拓扑排序做一些改变 我们考虑将所有入度为0且现在的拓扑序号已经大于等于l的点放入 ...

  5. Luogu 4409 [ZJOI2006]皇帝的烦恼

    BZOJ 1863 lyd口中的夹B递推. 挺妙的解法. 第一个感觉是找到一个最大的相邻的$a_i + a_{i - 1}$就可以了,但是这个想法大概只对了一半,一半的意思是说只有在$n$为偶数的时候 ...

  6. Entity Framework Tutorial Basics（38）：Explicit Loading

    Explicit Loading with DBContext Even with lazy loading disabled, it is still possible to lazily load ...

  7. LVM扩展学习日志

    lvm是逻辑卷管理的简称,它将一个或多个物理硬盘分区(PV)组成一个逻辑硬盘(VG)来使用,  然后从这个VG中划分出逻辑分区(LV), 以上概念是我理解的东西,可能和书上的不一样. 以下所有命令都是 ...

  8. iOS组件化方案

    一.蘑菇街url-block方案 这是蘑菇街中应用的一种页面间调用的方式,通过在启动时注册组件提供的服务,把调用组件使用的url和组件提供的服务block对应起来,保存到内存中.在使用组件的服务时,通 ...

  9. SpringMVC的理解

    SpringMVC工作原理 SpringMvc是基于过滤器对servlet进行了封装的一个框架,我们使用的时候就是在web.xml文件中配置DispatcherServlet类:SpringMvc工作 ...

  10. HTML5与CSS3基础教程(第8版) PDF扫描版​

    <HTML5与CSS3基础教程(第8版)>自第1版至今,一直是讲解HTML和CSS入门知识的经典畅销书,全面系统地阐述HTML5和CSS3基础知识以及实际运用技术,通过大量实例深入浅出地分 ...