|
|
楼主 |
发表于 2016-6-28 20:58:23
|
显示全部楼层
- define(function(require) {
- var $ = require("jquery");
- var justep = require("$UI/system/lib/justep");
- var Model = function() {
- this.callParent();
- };
- Model.prototype.modelLoad = function(event) {
- this.x = [];// 记录鼠标移动是的X坐标
- this.y = [];// 记录鼠标移动是的Y坐标
- this.clickDrag = [];
- this.lock = false;// 鼠标移动前，判断鼠标是否按下
- this.isEraser = false;
- this.storageColor = "#000000";
- this.eraserRadius = 15;// 擦除半径值
- this.color = [ "#000000", "#FF0000", "#80FF00", "#00FFFF", "#808080", "#FF8000", "#408080", "#8000FF", "#CCCC00" ];// 画笔颜色值
- this.fontWeight = [ 2, 5, 8 ];
- this.$ = function(id) {
- return typeof id == "string" ? document.getElementById(id) : id;
- };
- this.canvas = this.$("canvas");
- if (this.canvas.getContext) {
- } else {
- alert("您的浏览器不支持 canvas 标签");
- return;
- }
- this.cxt = this.canvas.getContext('2d');
- this.cxt.lineJoin = "round";// context.lineJoin - 指定两条线段的连接方式
- this.cxt.lineWidth = 5;// 线条的宽度
- this.iptClear = this.$("clear");
- this.revocation = this.$("revocation");
- this.imgurl = this.$("imgurl");// 图片路径按钮
- this.w = this.canvas.width;// 取画布的宽
- this.h = this.canvas.height;// 取画布的高
- this.touch = ("createTouch" in document);// 判定是否为手持设备
- this.StartEvent = this.touch ? "touchstart" : "mousedown";// 支持触摸式使用相应的事件替代
- this.MoveEvent = this.touch ? "touchmove" : "mousemove";
- this.EndEvent = this.touch ? "touchend" : "mouseup";
- this.bind();
- };
- Model.prototype.bind = function() {
- var t = this;
- /* 清除画布 */
- this.iptClear.onclick = function() {
- t.clear();
- };
- /* 鼠标按下事件，记录鼠标位置，并绘制，解锁lock，打开mousemove事件 */
- this.canvas['on' + t.StartEvent] = function(e) {
- var touch = t.touch ? e.touches[0] : e;
- var _x = touch.clientX - touch.target.offsetLeft;// 鼠标在画布上的x坐标，以画布左上角为起点
- var _y = touch.clientY - touch.target.offsetTop;// 鼠标在画布上的y坐标，以画布左上角为起点
- this._x = _x;
- this._y = _y;
- if (t.isEraser) {
- t.resetEraser(_x, _y, touch);
- } else {
- t.movePoint(_x, _y);// 记录鼠标位置
- t.drawPoint();// 绘制路线
- }
- t.lock = true;
- };
- /* 鼠标移动事件 */
- this.canvas['on' + t.MoveEvent] = function(e) {
- var touch = t.touch ? e.touches[0] : e;
- if (t.lock)// t.lock为true则执行
- {
- var _x = touch.clientX - touch.target.offsetLeft;// 鼠标在画布上的x坐标，以画布左上角为起点
- var _y = touch.clientY - touch.target.offsetTop;// 鼠标在画布上的y坐标，以画布左上角为起点
- if (t.isEraser) {
- // if(t.Timer)clearInterval(t.Timer);
- // t.Timer=setInterval(function(){
- t.resetEraser(_x, _y, touch);
- // },10);
- } else {
- t.movePoint(_x, _y, true);// 记录鼠标位置
- t.drawPoint();// 绘制路线
- }
- }
- };
- this.canvas['on' + t.EndEvent] = function(e) {
- /* 重置数据 */
- t.lock = false;
- t.x = [];
- t.y = [];
- t.clickDrag = [];
- clearInterval(t.Timer);
- t.Timer = null;
- };
- this.revocation.onclick = function() {
- t.redraw();
- };
- this.changeColor();
- this.imgurl.onclick = function() {
- t.getUrl();
- };
- /* 橡皮擦 */
- this.$("eraser").onclick = function(e) {
- t.isEraser = true;
- t.$("error").style.color = "red";
- t.$("error").innerHTML = "您已使用橡皮擦！";
- };
- };
- Model.prototype.movePoint = function(x, y, dragging) {
- /* 将鼠标坐标添加到各自对应的数组里 */
- this.x.push(x);
- this.y.push(y);
- this.clickDrag.push(y);
- };
- Model.prototype.drawPoint = function(x, y, radius) {
- for (var i = 0; i < this.x.length; i++)// 循环数组
- {
- this.cxt.beginPath();// context.beginPath() , 准备绘制一条路径
- if (this.clickDrag[i] && i) {// 当是拖动而且i!=0时，从上一个点开始画线。
- this.cxt.moveTo(this.x[i - 1], this.y[i - 1]);// context.moveTo(x,
- // y) ,
- // 新开一个路径，并指定路径的起点
- } else {
- this.cxt.moveTo(this.x[i] - 1, this.y[i]);
- }
- this.cxt.lineTo(this.x[i], this.y[i]);// context.lineTo(x, y)
- // ,
- // 将当前点与指定的点用一条笔直的路径连接起来
- this.cxt.closePath();// context.closePath() , 如果当前路径是打开的则关闭它
- this.cxt.stroke();// context.stroke() , 绘制当前路径
- }
- };
- Model.prototype.clear = function() {
- this.cxt.clearRect(0, 0, this.w, this.h);// 清除画布，左上角为起点
- };
- Model.prototype.redraw = function() {
- /* 撤销 */
- this.cxt.restore();
- };
- Model.prototype.preventDefault = function() {
- /* 阻止默认 */
- var touch = this.touch ? e.touches[0] : e;
- if (this.touch)
- touch.preventDefault();
- else
- window.event.returnValue = false;
- };
- Model.prototype.changeColor = function() {
- /* 为按钮添加事件 */
- var t = this, iptNum = this.$("color").getElementsByTagName("input"), fontIptNum = this.$("font").getElementsByTagName("input");
- for (var i = 0, l = iptNum.length; i < l; i++) {
- iptNum[i].index = i;
- iptNum[i].onclick = function() {
- t.cxt.save();
- t.cxt.strokeStyle = t.color[this.index];
- t.storageColor = t.color[this.index];
- t.$("error").style.color = "#000";
- t.$("error").innerHTML = "如果有错误，请使用橡皮擦：";
- t.cxt.strokeStyle = t.storageColor;
- t.isEraser = false;
- }
- }
- for (var i = 0, l = fontIptNum.length; i < l; i++) {
- t.cxt.save();
- fontIptNum[i].index = i;
- fontIptNum[i].onclick = function() {
- t.changeBackground(this.index);
- t.cxt.lineWidth = t.fontWeight[this.index];
- t.$("error").style.color = "#000";
- t.$("error").innerHTML = "如果有错误，请使用橡皮擦：";
- t.isEraser = false;
- t.cxt.strokeStyle = t.storageColor;
- }
- }
- };
- Model.prototype.changeBackground = function(num) {
- /* 添加画笔粗细的提示背景颜色切换，灰色为当前 */
- var fontIptNum = this.$("font").getElementsByTagName("input");
- for (var j = 0, m = fontIptNum.length; j < m; j++) {
- fontIptNum[j].className = "";
- if (j == num)
- fontIptNum[j].className = "grea";
- }
- };
- Model.prototype.getUrl = function() {
- this.$("html").innerHTML = this.canvas.toDataURL();
- };
- Model.prototype.resetEraser = function(_x, _y, touch) {
- /*使用橡皮擦-提醒*/
- var t = this;
- //this.cxt.lineWidth = 30;
- /*source-over 默认,相交部分由后绘制图形的填充(颜色,渐变,纹理)覆盖,全部浏览器通过*/
- t.cxt.globalCompositeOperation = "destination-out";
- t.cxt.beginPath();
- t.cxt.arc(_x, _y, t.eraserRadius, 0, Math.PI * 2);
- t.cxt.strokeStyle = "rgba(250,250,250,0)";
- t.cxt.fill();
- t.cxt.globalCompositeOperation = "source-over"
- };
- return Model;
- });
|
|
[复制链接]
IP卡
狗仔卡
发表于 2016-6-28 20:56:40
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
显身卡
