/**
* @private
* @class Ext.ux.panel.DrawerPanel
* @author dys
*
*
*/
Ext.define('Ext.ux.panel.DrawerPanel', {
extend: 'Ext.container.Container',
height: 604,
width: 695,
layout: {
type: 'border'
},
originalImage:null,
initComponent: function() {
var me = this;
Ext.applyIf(me, {
listeners:{
render:function(){
var canvas=document.getElementById('canvas');
var cxt = canvas.getContext('2d');
if(me.originalImage!=null){
var image = new Image();
image.src = me.originalImage;
cxt.drawImage(image, 0, 0, 695, 440);
}
cxt.lineJoin = "round";// context.lineJoin - 指定两条线段的连接方式
cxt.lineWidth = 2;// 线条的宽度
cxt.strokeStyle = '#000000';// 线条的颜色
cxt.fillStyle = "#000000";// 字体颜色
cxt.font = 'normal 10px 微软雅黑';// 字大小
cxt.textBaseline = 'top'; //字垂直对齐方式
}
},
items: [
{
xtype: 'panel',
region: 'north',
frame: true,
height: 164,
layout: {
align: 'stretch',
type: 'hbox'
},
items: [
{
xtype: 'container',
width: 95,
layout: {
type: 'absolute'
},
items: [
{
xtype: 'radiofield',
x: 20,
y: 10,
name:'type',
fieldLabel: '',
boxLabel: '画线',
listeners:{
change:function(radio,newValue){
if(newValue){
me.removeAllMouseEvents();
var canvas=document.getElementById('canvas');
var cxt = canvas.getContext('2d');
cxt.restore();
me.drawLine(me);
}
}
}
},
{
xtype: 'radiofield',
x: 20,
y: 40,
name:'type',
fieldLabel: '',
boxLabel: '文字',
listeners:{
change:function(radio,newValue){
if(newValue){
me.removeAllMouseEvents();
me.drawText();
}
}
}
},
{
xtype: 'radiofield',
x: 20,
y: 70,
name:'type',
id:'eraserRadio',
fieldLabel: '',
boxLabel: '橡皮',
listeners:{
change:function(radio,newValue){
if(newValue){
me.removeAllMouseEvents();
var canvas=document.getElementById('canvas');
var cxt = canvas.getContext('2d');
cxt.save();
me.drawLine(me);
cxt.lineWidth = Ext.getCmp('eraserRadius').getValue();// 线条的宽度
cxt.strokeStyle = '#FFFFFF';
//cxt.restore();
}
}
}
},
{
xtype: 'button',
x: 20,
y: 110,
height: 20,
width: 50,
text: '还原',
handler:function(){
var canvas=document.getElementById('canvas');
var ctx = canvas.getContext('2d');
if(me.originalImage!=null){
var image = new Image();
image.src = me.originalImage;
ctx.drawImage(image, 0, 0, 695, 440);
}else{
ctx.clearRect(0, 0, 695, 440);
}
}
}
]
},
{
xtype: 'container',
flex: 2,
layout: {
type: 'absolute'
},
items: [
{
xtype: 'colorpicker',
x: 10,
y: 0,
floating: false,
height: 49,
width: 558,
listeners:{
select:function(colorPicker,color){
var canvas=document.getElementById('canvas');
var cxt = canvas.getContext('2d');
cxt.lineJoin = "round";// context.lineJoin - 指定两条线段的连接方式
cxt.strokeStyle = '#'+color;// 线条的颜色
cxt.fillStyle = "#"+color;// 字体颜色
}
}
},
{
xtype: 'textfield',
x: 10,
y: 60,
width: 560,
fieldLabel: '文字内容',
id:'drawPanel_Text'
},
{
xtype: 'slider',
x: 10,
y: 90,
width: 560,
value: 2,
increment: 1,
minValue: 2,
maxValue: 50,
value : 2,
fieldLabel: '线条粗细',
listeners:{
change:function(slider,newValue){
var canvas=document.getElementById('canvas');
var cxt = canvas.getContext('2d');
cxt.lineWidth = newValue;// 线条的粗细
}
}
},
{
xtype: 'slider',
x: 10,
y: 110,
width: 560,
value: 30,
increment: 1,
id:'eraserRadius',
minValue: 2,
maxValue: 60,
fieldLabel: '擦除直径',
listeners:{
change:function(slider,newValue){
if(Ext.getCmp('eraserRadio').getValue()){
var canvas=document.getElementById('canvas');
var cxt = canvas.getContext('2d');
cxt.lineWidth = newValue;// 线条的粗细
}
}
}
},
{
xtype: 'slider',
x: 10,
y: 130,
width: 560,
value: 10,
increment: 1,
minValue: 10,
maxValue: 30,
fieldLabel: '文字大小',
listeners:{
change:function(slider,newValue){
var canvas=document.getElementById('canvas');
var cxt = canvas.getContext('2d');
cxt.font = 'normal '+newValue+'px 微软雅黑';// 字大小
}
}
}
]
}
]
},
{
xtype: 'panel',
region: 'center',
html : ['<canvas id="canvas" width="695" height="440"></canvas>']
}
]
});
me.callParent(arguments);
},
drawLine:function(me){
var paint = {
init : function() {
this.load();
},
load : function() {
this.x = [];// 记录鼠标移动是的X坐标,this是paint
this.y = [];// 记录鼠标移动是的Y坐标
this.clickDrag = [];
this.lock = false;// 鼠标移动前，判断鼠标是否按下
this.isEraser = false;
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.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();
},
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坐标，以画布左上角为起点
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坐标，以画布左上角为起点
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;
};
},
movePoint : function(x, y, dragging) {
/* 将鼠标坐标添加到各自对应的数组里 */
var stage_info = this.canvas.getBoundingClientRect();
this.x.push(x-stage_info.left);
this.y.push(y- stage_info.top);
this.clickDrag.push(y- stage_info.top);
},
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() , 绘制当前路径
}
}
};
paint.init();
},
drawText:function(){
var canvas = document.getElementById("canvas");
if (canvas.getContext) {
} else {
alert("您的浏览器不支持 canvas 标签");
return;
}
var cxt = canvas.getContext('2d');
var Touch = ("createTouch" in document);// 判定是否为手持设备
var StartEvent = Touch ? "touchstart" : "mousedown";// 支持触摸式使用相应的事件替代
canvas['on' + StartEvent] = function(e) {
var stage_info = canvas.getBoundingClientRect();
var touch = touch ? e.touches[0] : e;
var _x = touch.clientX - touch.target.offsetLeft;// 鼠标在画布上的x坐标，以画布左上角为起点
var _y = touch.clientY - touch.target.offsetTop;// 鼠标在画布上的y坐标，以画布左上角为起点
cxt.fillText(Ext.getCmp('drawPanel_Text').getValue(),_x-stage_info.left,_y-stage_info.top,440);
};
},
removeAllMouseEvents:function(){
var canvas=document.getElementById('canvas');
canvas['onmousedown']=function(){};
canvas['onmouseover']=function(){};
canvas['onmouseup']=function(){};
}
});