<!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. [转载]/etc/security/limits.conf解释及应用

    limits.conf的格式如下: username|@groupname type resource limit username|@groupname:设置需要被限制的用户名,组名前面加@和用户名 ...

  2. ARC100C Linear Approximation

    传送门 分析 这道题真的好水呀QwQ,想必大家都知道对于式子|x-2|+|x-3|x取什么值可以使式子结果最小,这道题也是这个原理,只需要将要额外减的1.2.3……提前减掉就行了. 代码 #inclu ...

  3. getUserMedia API

    getUserMedia API 特别有趣的一个 API,能够调用电脑的摄像头,未来这个 API 将被广泛用来让浏览器和用户之间互动. 如果 <video> 标签和 Canvas 现结合 ...

  4. SDUT 3399 数据结构实验之排序二：交换排序

    数据结构实验之排序二:交换排序 Time Limit: 1000MS Memory Limit: 65536KB Submit Statistic Problem Description 冒泡排序和快 ...

  5. LeetCode第35题：搜索插入位置

    题目描述: 给定一个排序数组和一个目标值,在数组中找到目标值,并返回其索引.如果目标值不存在于数组中,返回它将会被按顺序插入的位置. 你可以假设数组中无重复元素. 示例 1: 输入: [1,3,5,6 ...

  6. 解决eclipse的source not found change at.

    eclise快捷键F3跳转到类的实现方法,出现如图所示问题:source not found change  atttached  source.点击下图红圈,Change Attached  Sou ...

  7. MVC Controller传值到View的几种方式总结

    Controller中的代码如下 var bingo = new Web1.Models.Bingo() { Title = "测试", desc = "嘻嘻" ...

  8. 使用sphinx快速生成Python API 文档

    一  简单介绍 不管是开源还是闭源,文档都是很重要的.当然理论上说,最好的文档就是代码本身,但是要让所有人都能读懂你的代码这太难了.所以我们要写文档.大部分情况,我们不希望维护一份代码再加上一份文档, ...

  9. STL学习笔记--临时对象的产生与运用

    所谓的临时对象,就是一种无名对象(unnamed objects).它的出现如果不在程序员的预期之下,往往造成效率上的负担.但有时刻意制造一些临时对象,却又是使程序干净清爽的技巧.刻意制造临时对象的方 ...

  10. CUDA中自动初始化显卡设备宏

    每次为了减少初始化的工作量,可以写入下面的宏. #define CUT_DEVICE_INIT(ARGC,ARGV){ \ int deviceCount; \ CUDA_SAFE_CALL_NO_S ...