PIXI 写一个字及图片保存（2）

最新推荐文章于 2024-05-30 11:27:58 发布

weixin_30340775

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量328

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/congxueda/p/9299003.html

版权

<!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>

存在问题：

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

转载于:https://www.cnblogs.com/congxueda/p/9299003.html

weixin_30340775

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
PIXI 写一个字及图片保存（2）

<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>pixi</title> <script src="../js/pixi.min.js"></script></head>...
复制链接

扫一扫