<!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. 前端学习笔记2017.6.12 HTML的结构以及xhtml、html、xml的区别

    HTML的结构 一个HTML文档可分为几个部分,如下图所示: DOCTYPE部分.head部分和body部分 DOCTYPE部分,这个很重要,可以理解为不同的DOCTYPE意味着不同的html标准,因 ...

  2. C++面试笔记--面向对象

    说到面向对象,大家第一反应应该就是它的三大特性:封装性.继承性和多态性.那么我们先简单的了解一下这三大特性: (1)封装性:封装,也就是把客观事物封装成抽象的类,并且类可以把自己的数据和方法只让可信的 ...

  3. C++笔记--函数

    函数的定义和声明 函数的声明和定义都必须描述相同的类型,但是声明可以不写参数名,定义则必须写参数名,但是他们的参数名字可以不同. 一个局部变量被声明为static,那么这个局部变量将只会被初始化一次, ...

  4. 并没有看起来那么简单leetcode Generate Parentheses

    问题解法参考 它给出了这个问题的探讨. 超时的代码: 这个当n等于7时,已经要很长时间出结果了.这个算法的复杂度是O(n^2). #include<iostream> #include&l ...

  5. wpf跳转网页

    如果是本地磁盘上的网页,可以考虑利用操作系统的文件关联自动调用操作系统默认浏览器: System.Diagnostics.Process.Start("explorer.exe", ...

  6. 正经学C#_循环[do while,while,for]：[c#入门经典]

    在c#中循环语句总共三种,do...while ,while,for这三种语句. 循环语句,是为了解决一些繁琐的计算.比如输出0-10这10个数字. 在不循环的情况下你可以能这么写 Console.W ...

  7. 最大k乘积

    思路:看到这道题,第一思路就要是动态规划,不要想着用啥暴力或者排列组合,只会搞得很复杂. 动态规划的思路是对这个整数,我们从后向前进行划分k个数字,我们知道对于划分后的最后一个整数,它的位数要保证前面 ...

  8. Linux安装步骤

    1.查看Linux系统是32位还是64位 #查看系统位数 getconf LONG_BIT #或者 uname -m #或者 arch #或者 file /sbin/init 2.IP配置 网络选择桥 ...

  9. DP【洛谷P3135】[USACO16JAN]堡哞Fort Moo

    [洛谷P3135][USACO16JAN]堡哞Fort Moo Bessie和她的朋友Elsie正在建筑一个堡垒,与任何一个好的堡垒一样,这个需要一个强固的框架.Bessie想造一个轮廓是1m宽的空心 ...

  10. 树状数组 P3605 [USACO17JAN]Promotion Counting晋升者计数

    P3605 [USACO17JAN]Promotion Counting晋升者计数 题目描述 奶牛们又一次试图创建一家创业公司,还是没有从过去的经验中吸取教训--牛是可怕的管理者! 为了方便,把奶牛从 ...