<!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. Evil Book -- CodeChef

    传送门 分析 对于这道题,我们首先思考一个贪心策略,即对于所有我们要打败的厨师我们肯定可以先打败需使用帮助次数少的厨师再打败需使用帮助次数多的厨师 ,因为这样可以使得能支付得起帮助费用的可能性尽可能的 ...

  2. 前端（HTML/CSS/JS）-CSS编码规范

    1. 文件名规范 文件名建议用小写字母加中横线的方式.为什么呢?因为这样可读性比较强,看起来比较清爽 https://stackoverflow.com/questions/25704650/disa ...

  3. SDUT 3401 数据结构实验之排序四：寻找大富翁.！

    数据结构实验之排序四:寻找大富翁 Time Limit: 150MS Memory Limit: 512KB Submit Statistic Problem Description 2015胡润全球 ...

  4. [译]Javascript中闭包的各种例子

    本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...

  5. WP8.1&UWP手机设备对状态栏操作

    改UWP和WP8.1手机设备的状态栏.首先先说较为普遍的WP8.1设备:首先添加引用:using Windows.UI.ViewManagement;其次就可以使用StatusBar了,它提供了以下方 ...

  6. STL_ALGORITHM_H

    sort_unique_copy /////////////////////////////////////////////////////////// // Copyright (c) 2013, ...

  7. 配置vuex并使用

    配置vuex并使用 安装vuex: npm install --save-dev vuex 在src目录下创建store文件夹 store文件夹下文件 index.js,state.js,getter ...

  8. luogu3911 最小公倍数之和(莫比乌斯反演)

    link 给定\(A_1,A_2,\dots,A_N\),求\(\sum_{i=1}^N\sum_{j=1}^Nlcm(A_i,A_j)\) \(1\le N\le 50000;1\le A_i\le ...

  9. iOS开发小工具

    基本上在Mac Appstore里面都有,很多是免费的.因为某种原因要重装Mac系统(这么多年来首次重装Mac系统),特意整理了下备忘. 1.AppIcon: 可以瞬间把图片转换为应用所需要的Icon ...

  10. 关于在多个UItextield切换焦点

    本人对于应用的完美用户体验是这样认为:当一个应用是迎合用户习惯 ,并且在人机交互之中降低用户的学习成本 ,由于应用和人的思维方向一致时,就会有共鸣,这对于程序设计是有益的,因为只要愿意去改变总有优雅的 ...