PIXI 写一个字及图片保存(2)
<!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)的更多相关文章
- canvas学写一个字
第一步:画一个米字格,先画一个矩形,再画中间的米字. <script> window.onload = function(){ var canvas = document.getEleme ...
- 使用iScroll和photoswipe写手机浏览图片的插件的几点经验
首先,当我知道我得到一个任务需要写一个在手机上能浏览图片的插件时,我第一想到了iScroll.它的左右滑动,上下滑动的效果在安卓手机上也能让用户有良好的体验,自己写也能方便控制. 我的需求是,插件要能 ...
- 24位和8位BMP图片保存纯C代码
BMP图片大家都知道,可以通过查看BMP图片结构使用纯C就可以打开,编辑,处理,保存图片.非常方便使用. 具体BMP结构可以参考:wingdi.h头文件.今天主要在进行删减代码,需要把多余的代码删除, ...
- 使用Emacs中的org-mode写cnblogs之图片插入
.title { text-align: center; margin-bottom: .2em } .subtitle { text-align: center; font-size: medium ...
- .NET压缩图片保存 .NET CORE WebApi Post跨域提交 C# Debug和release判断用法 tofixed方法 四舍五入 (function($){})(jQuery); 使用VUE+iView+.Net Core上传图片
.NET压缩图片保存 需求: 需要将用户后买的图片批量下载打包压缩,并且分不同的文件夹(因:购买了多个用户的图片情况) 文章中用到了一个第三方的类库,Nuget下载 SharpZipLib 目前用 ...
- canvas知识03:学写一个字案例
效果
- 2018-5-22-SublimeText-粘贴图片保存到本地
title author date CreateTime categories SublimeText 粘贴图片保存到本地 lindexi 2018-05-22 15:15:26 +0800 2018 ...
- php 获取远程图片保存到本地
php 获取远程图片保存到本地 使用两个函数 1.获取远程文件 2.把图片保存到本地 /** * 获取远程图片并把它保存到本地 * $url 是远程图片的完整URL地址,不能为空. */ functi ...
- 用qt代码怎样编写图片保存格式[qt4.6]
用qt代码怎样编写图片保存格式 qt提供了多个保存图片的接口,比较常用的接口如下 bool QPixmap::save ( const QString & fileName, const ch ...
随机推荐
- ZROI2018普转提day6t3
传送门 分析 居然卡哈希数,万恶的出题人...... 感觉我这个方法似乎比较呆,我的代码成功成为了全网最慢的代码qwq 应该是可以直接哈希的 但由于我哈希学的不好又想练练线段树维护哈希,于是就写了个线 ...
- 《Head First Servlets & JSP》-11-Web应用部署
Web目录 WAR文件 WAR文件只是Web应用结构的一个快照,采用了一种更可移植的压缩形式. 建立WAR文件时,就是把整个Web应用结构(去掉Web应用上下文目录,就是把WEB-INF之上的一级目录 ...
- [学习笔记]父进程wait和waitpid
1.wait和waitpid出现的原因 SIGCHLD q 当子进程退出的时候,内核会向父进程发送SIGCHLD信号,子进程的退出是个异步事件(子进程可以在父进程运行的任何时刻终止) q 子进程退 ...
- [译]Javascript中的Ternary operator
本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...
- 第一个HelloWorld!
$.介绍 1.eclipse的基本使用 2.第一个程序HelloWorld 3.总结 $.基本使用 对于刚入门的java新手来说选择一个舒适的编译器能让你快速的上手java的程序编写. 针对英语low ...
- c语言参考书籍
很惭愧没能把c++学的很好,毕竟离开始工作只有2年时间,对自己要求不要过高,慢慢来吧.话说知道自己的不足,以后要更加抓紧了!fighting~ 现在计划着把c语言给学习一下了,当然这次指的是深入地学习 ...
- 编译安装log4cxx
1.介绍 Log4cxx是开放源代码项目Apache Logging Service的子项目之一,是Java社区著名的log4j的c++移植版,用于为C++程序提供日志功能,以便开发者对目标程序进行调 ...
- VisualStudio.Net应用程序制作图标
前段时间用到了VS自带打包工具,对程序进行打包,但是由于打包完成后,安装后的软件图标甚是难看于是想把图标也给打包进去.于是找到了两个解决方式. 第一种也是最简单的: 在VS中按照下面方式进行即可: 第 ...
- Linux下oracle开机自启动服务
如果每次重启操作系统都要进行以上操作好麻烦,那么如何让Oracle作为系统服务在开机的时候自动启动呢? Oracle在$ORACLE_HOME/bin下提供许多对数据库进行操作的脚本,其中dbstar ...
- tomcat跨域(亲测可用)
首先下载cors-filter-2.5.jar(版本不要求)和java-property-utils-1.9.1 1.把这两个jar包放在tomcat的lib下. 2.在conf文件夹下找到web.x ...