<!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. python3-while与continue

    # Auther: Aaron Fan #要返回到循环开头,并根据条件测试结果决定是否继续执行循环,可使用continue#执行continue语句,让python忽略余下的代码 #只打印1到10之间 ...

  2. PDG科普篇

    作者:马健邮箱:stronghorse_mj@hotmail.com发布:2009.09.26 更新历史 2014.11.11补充了文字版PDG的部分内容增加CX PDF等打包格式的相关内容 2009 ...

  3. 从一个xaml文件获取xaml内容，遍历寻找对象

  4. python3中模块初识

    python的模块使用方法 1.用于显示python的环境变量 import sys print(sys.path) 运行路径执行结果如下: ['F:\\codes', 'F:\\codes', 'C ...

  5. [Algorithm]线性表

    一. 线性表基础算法 1.线性表插入操作 1 // 线性表插入操作(在第i(1≤i≤L.length+1)个位置上插入新元素elem) 2 bool InsertSeq( SeqList& L ...

  6. Mybatis环境搭建中的案例分析 及 如果自己编写DAO接口的实现类

    Mybatis环境搭建中的案例分析public static void main (String[] args) throws Exception { //读配置文件 //第一个: 使用类加载器,只能 ...

  7. form表单操作

    Django之Form组件 Django的Form主要具有一下几大功能: 生成HTML标签 验证用户数据(显示错误信息) HTML Form提交保留上次提交数据 初始化页面显示内容 简单例子  For ...

  8. 【bzoj3813】: 奇数国 数论-线段树-欧拉函数

    [bzoj3813]: 奇数国 题意:给定一个序列,每个元素可以分解为最小的60个素数的形式.(x=p1^k1*p2^k2*......p60^k60)(p1=2,p2=3,…,p60=281) 支持 ...

  9. How to grow up as a BA

    简书 https://www.jianshu.com/p/8f62b5c7fe1b Thoughtworks https://mp.weixin.qq.com/s/n1hGAM2nUoLvkE5xuU ...

  10. Maven入门（二）pom.xml和核心概念

    一.pom.xml文件说明 1.pom意思就是project object model. 2.pom.xml包含了项目构建的信息,包括项目的信息.项目的依赖等. 3.pom.xml文件是可以继承的,大 ...