HTML5 canvas 在线画笔绘图工具（二）

最新推荐文章于 2024-07-10 20:56:15 发布
最新推荐文章于 2024-07-10 20:56:15 发布
阅读量4.1k 收藏 2
点赞数
分类专栏： 技术博客 文章标签： 2d html5 javascript online paint canvas
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gongztpm/article/details/43940709
版权


Canvas+Javascript 带图标的工具条制作 TToolbar


工具条是由一个TToolbar对象和两个按钮对象（TImageButton、TColorButton）组成，因为之前我大部分时间是使用ｄ.ｅ.ｌ.ｐ.ｈ.ｉ进行开发，所以命名方面比较偏向于ｄ.ｅ.ｌ.ｐ.ｈ.ｉ的风格，请处女座的同学忍耐将就一下。


图标按钮 TImageButton


TImageButton 是一个图标按钮对象,可以设置三个图标文件,分别是正常状态,鼠标移上状态,鼠标点击状态。


下面我们介绍一下TImageButton的参数：

 

Command是按钮对应的功能编号,比如我们定义1为直线,2为矩形.

NormalSrc, MouseOnSrc, MouseDownSrc 分别为正常状态,鼠标移上状态,鼠标点击状态 的图标地址。

x, y, width, height 按钮在工具条上的位置和尺寸。

Toolbar 为宿主工具条。

Group 是按钮所属分组。

function TImageButton(Command,
                      NormalSrc,
                      MouseOnSrc,
                      MouseDownSrc,
                      x,
                      y,
                      width,
                      height,
                      Toolbar,
                      group)
{
}


下面为在Canvas上绘制按钮图标的代码

当鼠标移进按钮或鼠标移出按钮时,将调用ChangeState来改变按钮的状态.为按钮设置不同的图标属性,然后通过Clear()函数将原来的图素清除,再利用RenderImage函数绘制新的按钮。


	function Clear() {
		Context.clearRect(Toolbar.x + x, Toolbar.y + y, width, height);
	}

	function LoadImage(newsrc) {

		image.src = newsrc;

		if (image.complete) {
			RenderImage(image);
		} else
			image.onload = function() {
				RenderImage(image);
			};
	}

	function RenderImage(image) {

		Context.drawImage(image, Toolbar.x + x, Toolbar.y + y, width, height);
	}

	function ChangeState(NewState) {

		state = NewState;
		Clear();
		if (NewState == CSN)
			LoadImage(NormalSrc);
		else if (NewState == CSO)
			LoadImage(MouseOnSrc);
		else if (NewState == CSD)
			LoadImage(MouseDownSrc);
	}


PointIn函数用于检测鼠标所在位置是否在当前按钮所覆盖区域中。

注意这里的AbsX与AbsY函数，由于鼠标的x值和y值是鼠标在页面中的坐标，而当前TImageButton对象的x,y是其在TToolbar对象中的坐标位置。因此我们在计算该TImageButton所覆盖区域时，应当加上画布在页中的坐标以及TToolbar对象在画布中的偏移量。



</pre><pre class="javascript" name="code">    function PointIn (testx,testy)
    {
       if ((testx>Absx())&&(testx<(Absx()+width))
          &&(testy>Absy()) && (testy<(Absy()+height)))
         {
   
              return true;
              
              }
          else
             return false; 
              
    }; 

function Absx() {
		return Canvas.offsetLeft + Toolbar.x + x;
	};
function Absy() {

		return Canvas.offsetTop + Toolbar.y + y;
	};


颜色选择按钮TColorButton

从下面TColorButton对象的建立参数我们可以看到，它与TImageButton基本类似，按照面向对象的法则，应当抽取一个基类，由两个TColorButton和TImageButton来继承。但我还没有学会如何在Javascript中实现对类的继承，所以暂时将它们分成两个完全不相干的类。

注意一下这个建立函数与TImageButton的唯一区别是它的Command参数不再是保存命令的编号，而是保存颜色的值。


function TColorButton(Command,
                      x,
                      y,
                      width,
                      height,
                      Toolbar,
                      group)
{
</pre><pre class="javascript" name="code">}


我们再来看看它的按钮是如何绘制到画布上的

TColorButton同样有 mousemoveon,mouseleave,click三种状态。当鼠标在按钮上时在颜色选择小框外画一个淡黄色的小框。


function Clear()
    {
       Context.clearRect(Toolbar.x+ x,Toolbar.y+ y,width,height);
    }
    function RenderButton()
    {
       
       Context.fillStyle=command;
       Context.fillRect(Toolbar.x+ x, Toolbar.y+ y,width,height);
       if (state==CSO)
       {
       	  Context.strokeStyle="#FFCC33";
		  Context.lineWidth=2;
		  Context.strokeRect(Toolbar.x+ x+2, Toolbar.y+ y+2,width-4,height-4); 
       }
    }
    function ChangeState(NewState)
    {
       
       state=NewState;
       Clear();
       RenderButton();  
    }




主工具条TToolbar

function TToolbar(Canvas, x, y, width, height) {
	var Context = Canvas.getContext('2d');
	this.Canvas = Canvas;
	this.x = x;
	this.y = y;
	this.width = width;
	this.height = height;
	var CurrentShapeProperty;
	var BorderColor;
	btnList = new Array();
	btnCounter = 0;
	Create();
}

首先我们来看一下TToolbar的建立参数和成员变量

Canvas是工具条的图象载体,与用户交互的UI元素. x,y 为工具条在画布(Canvas) 上的偏移量,width,height分别为工具条的宽度和高度.

定义画布的上下文

var Context = Canvas.getContext('2d');

CurrentShapeProperty 用于记录选择的一些图形属性 如画笔的宽度,颜色等.


TToolbar负责做两件重要的工作

1.判断鼠标移动到了哪个按钮或者鼠标点击了哪个按钮.

利用 InstallEvents 绑定工具条的画布Canvas鼠标事件.

mousemove函数逐个判断当前工具条所管理的按钮是否获得了鼠标焦点. 如果当前鼠标移到了该按钮上,将该按钮的图标设为相应图标(在testHit函数中).其余图标设置为普通状态.

mousedown 函数逐个判断当前工具条所管理的按钮是否获得了鼠标点击.如果是颜色按钮则将当前选中的颜色值拷贝到大颜色按钮.

	mousemove = function(event) {
		var Current = null;
		for (var i = 0; i < btnList.length; i++) {
			if (btnList[i].testHit(event.clientX, event.clientY) == true)
				Current = btnList[i];
		}
		if (Current != null) {
			for (var i = 0; i < btnList.length; i++) {
					if ((btnList[i] != Current) && (btnList[i].getisChecked() == false))
						btnList[i].setNormal();
			}
		}
	};
	mousedown = function(evnet) {
		var Current = null;
		for (var i = 0; i < btnList.length; i++) {

			if (btnList[i].testMouseDown(event.clientX, event.clientY) == true)
				Current = btnList[i];
		}
		if (Current != null) {
			for (var i = 0; i < btnList.length; i++) {
				if (Current.getGroup() == btnList[i].getGroup()) {
					if (btnList[i] != Current)
						btnList[i].setNormal();
				}
			}
			if (Current.getGroup()==3)
			{
			  var Color=Current.Command();
			  ColorSelected(Color);
			 }
		}
		
	};

	//安装鼠标移动、点击等方法
	this.InstallEvents = function() {
		Canvas.onmousemove = function(event) {
			mousemove(event);
		};
		Canvas.onmousedown = function(event) {
			mousedown(event);
		};
	};


另外我之前想用以下方法来绑定鼠标事件,没有成功请帮看一下问题出在哪里,谢谢

	function AddEvent(element, eventName, eventHandler) {
		window.alert( typeof element.addEventListener);
		if ( typeof element.addEventListener != "undefined") {
			window.alert(eventHandler);
			element.addEventListener(eventName, eventHandler, false);
			window.alert(element.onmousemove);
		} else
			element.attachEvent(eventName, eventHandler);
	}

	
	//安装鼠标移动、点击等方法
	this.InstallEvents = function() {
		AddEvent(Canvas,"onmousemove",this.mousemove);
		AddEvent(Canvas,"onmousedown",this.mousedown);
	};



2.管理画图的命令(TComand)

建立绘图命令会在后续的章节进行介绍.

 

this.getNewCommand = function(DisplayCanvas) {
		for (var i = 0; i < btnList.length; i++) {
			if (btnList[i].getGroup() == 1) {
				if (btnList[i].getisChecked()) {
					var commandId = btnList[i].Command();
					var command = new TCommand(DisplayCanvas, commandId);
					return command;
				}
			}

		}
		return null;
	};

在线演示


工具条对象完整代码(TToolbar)

function TToolbar(Canvas, x, y, width, height) {
	var Context = Canvas.getContext('2d');
	this.Canvas = Canvas;
	this.x = x;
	this.y = y;
	this.width = width;
	this.height = height;
	var CurrentShapeProperty;
	var BorderColor;
	btnList = new Array();
	btnCounter = 0;
	Create();
	// InstallEvents();
	function Create() {

		Context.strokeStyle = "black";
		Context.lineWidth = "2";
		Context.strokeRect(x, y, width, height);
	}


	this.AddButton = function(button) {
		btnList[btnCounter++] = button;
	};
	function AddEvent(element, eventName, eventHandler) {
		window.alert( typeof element.addEventListener);
		if ( typeof element.addEventListener != "undefined") {
			window.alert(eventHandler);
			element.addEventListener(eventName, eventHandler, false);
			window.alert(element.onmousemove);
		} else
			element.attachEvent(eventName, eventHandler);
	}

	mousemove = function(event) {
		var Current = null;
		for (var i = 0; i < btnList.length; i++) {
			if (btnList[i].testHit(event.clientX, event.clientY) == true)
				Current = btnList[i];
		}
		if (Current != null) {
			for (var i = 0; i < btnList.length; i++) {
					if ((btnList[i] != Current) && (btnList[i].getisChecked() == false))
						btnList[i].setNormal();
			}
		}
	};
	mousedown = function(evnet) {
		var Current = null;
		for (var i = 0; i < btnList.length; i++) {

			if (btnList[i].testMouseDown(event.clientX, event.clientY) == true)
				Current = btnList[i];
		}
		if (Current != null) {
			for (var i = 0; i < btnList.length; i++) {
				if (Current.getGroup() == btnList[i].getGroup()) {
					if (btnList[i] != Current)
						btnList[i].setNormal();
				}
			}
			if (Current.getGroup()==3)
			{
			  var Color=Current.Command();
			  ColorSelected(Color);
			 }
		}
		
	};

	//安装鼠标移动、点击等方法
	this.InstallEvents = function() {
		//AddEvent(Canvas,"onmousemove",this.mousemove);
		//AddEvent(Canvas,"onmousedown",this.mousedown);
		//Canvas.οnmοusemοve=this.mousemove;
		Canvas.onmousemove = function(event) {
			mousemove(event);
		};
		Canvas.onmousedown = function(event) {
			mousedown(event);
		};
	};
	this.setBorderColorButton=function(ColorButton)
	{
		BorderColor=ColorButton;		
	};
	function ColorSelected (color) {
	   BorderColor.setColor(color);
	} 
	this.getNewCommand = function(DisplayCanvas) {
		for (var i = 0; i < btnList.length; i++) {
			if (btnList[i].getGroup() == 1) {
				if (btnList[i].getisChecked()) {
					var commandId = btnList[i].Command();
					var command = new TCommand(DisplayCanvas, commandId);
					return command;
				}
			}

		}
		return null;
	};
	this.getShapeProperty = function() {
		if (typeof CurrentShapeProperty=="undefined")
		CurrentShapeProperty = new TShapeProperty();
		CurrentShapeProperty.setLineColor(BorderColor.Command());
		for (var i = 0; i < btnList.length; i++) {
			if (btnList[i].getGroup() == 2) {
				if (btnList[i].getisChecked()) {
					CurrentShapeProperty.setLineWidth(btnList[i].Command()); 
				}
			}
		}
		return CurrentShapeProperty;
	};
	
}

图片按钮完整代码(TImageButton)

 

function TImageButton(Command, NormalSrc, MouseOnSrc, MouseDownSrc, x, y, width, height, Toolbar, group) {
	var command = Command;
	var NormalSrc = NormalSrc;
	var MouseOnSrc = MouseOnSrc;
	var MouseDownSrc = MouseDownSrc;
	var x = x;
	var y = y;
	var width = width;
	var height = height;
	var Canvas = Toolbar.Canvas;
	var Context = Canvas.getContext("2d");
	var CSN = "Normal";
	var CSO = "MouseOn";
	var CSD = "MouseDown";
	var state = CSN;
	var Group = group;
	var image = new Image();
	CreateButton();

	function CreateButton() {

		LoadImage(NormalSrc);
	}

	function Absx() {
		return Canvas.offsetLeft + Toolbar.x + x;
	};
	function Absy() {

		return Canvas.offsetTop + Toolbar.y + y;
	};
	function PointIn(testx, testy) {
		if ((testx > Absx()) && (testx < (Absx() + width)) && (testy > Absy()) && (testy < (Absy() + height))) {

			return true;

		} else
			return false;

	};
	function Clear() {
		Context.clearRect(Toolbar.x + x, Toolbar.y + y, width, height);
	}

	function LoadImage(newsrc) {

		image.src = newsrc;

		if (image.complete) {
			RenderImage(image);
		} else
			image.onload = function() {
				RenderImage(image);
			};
	}

	function RenderImage(image) {

		Context.drawImage(image, Toolbar.x + x, Toolbar.y + y, width, height);
	}

	function ChangeState(NewState) {

		state = NewState;
		Clear();
		if (NewState == CSN)
			LoadImage(NormalSrc);
		else if (NewState == CSO)
			LoadImage(MouseOnSrc);
		else if (NewState == CSD)
			LoadImage(MouseDownSrc);
	}


	this.testHit = function(dx, dy) {

		if (PointIn(dx, dy)) {

			if (state == CSN) {
				ChangeState(CSO);

			}
			return true;
		}
		return false;

	};
	this.OnClick = function() {
	};
	this.testMouseDown = function(dx, dy) {

		if (PointIn(dx, dy)) {
			ChangeState(CSD);
			this.OnClick();
			return true;
		}
		return false;
	};
	this.getisChecked = function() {
		return (state == CSD);
	};
	this.Command = function() {
		return command;
	};
	this.MoveOn = function() {
		return (state == CSO);
	};
	this.setNormal = function() {
		ChangeState(CSN);
	};
	this.getGroup = function() {
		return Group;
	};
}


颜色选择框的完整代码（TColorButton）

<span style="font-size:12px;">function TColorButton(Command,
                      x,
                      y,
                      width,
                      height,
                      Toolbar,
                      group)
{
	var command=Command;
    var x=x;
    var y=y;
    var width=width;
    var height=height;
    var Canvas=Toolbar.Canvas;
    var Context=Canvas.getContext("2d");
    var CSN="Normal";
    var CSO="MouseOn";
    var CSD="MouseDown";
    var state=CSN;
    var Group=group;
    CreateButton();
    function CreateButton()
    {
       RenderButton();
    }
    function Absx() 
    {
       return Canvas.offsetLeft+Toolbar.x+x;
    };
    function Absy() 
    {
       
       return Canvas.offsetTop+Toolbar.y+y;
    };
    function PointIn (testx,testy)
    {
       if ((testx>Absx())&&(testx<(Absx()+width))
          &&(testy>Absy()) && (testy<(Absy()+height)))
         {
   
              return true;
              
              }
          else
             return false; 
              
    }; 
    function Clear()
    {
       Context.clearRect(Toolbar.x+ x,Toolbar.y+ y,width,height);
    }
    function RenderButton()
    {
       
       Context.fillStyle=command;
       Context.fillRect(Toolbar.x+ x, Toolbar.y+ y,width,height);
       if (state==CSO)
       {
       	  Context.strokeStyle="#FFCC33";
		  Context.lineWidth=2;
		  Context.strokeRect(Toolbar.x+ x+2, Toolbar.y+ y+2,width-4,height-4); 
       }
    }
    function ChangeState(NewState)
    {
       
       state=NewState;
       Clear();
       RenderButton();  
    }
    this.testHit=function(dx,dy)
    {
      
       if (PointIn(dx,dy))
       {
 
         if (state==CSN)
         {
            ChangeState(CSO);

         }
         return true;
       }
       return false;

    };
    this.testMouseDown=function(dx,dy)
    {
      
       if (PointIn(dx,dy))
       {
            ChangeState(CSD);
            return true;
       } 
       return false;
    };
    this.getisChecked=function()
    {
       return (state==CSD);
    };
    this.Command=function()
    {
       return command;
    };
    this.MoveOn=function()
    {
      return (state==CSO);
    };
    this.setNormal=function()
    {
       ChangeState(CSN);
    };
    this.getGroup=function()
    {
        return Group;
    };
    this.setColor=function(color)
    {
    	command=color;
    	Context.fillStyle=command;
        Context.fillRect(Toolbar.x+ x, Toolbar.y+ y,width,height);
    };
	
} 
</span>






gongztPM
关注
专栏目录
自定义View，和Canvas(画布)，Paint(画笔)，Path(路径)的用法
N_Y_S的博客
08-05 655
怎么自定义控件，Canvas画布，Paint画笔，Path路径的使用
基于HTML5 Canvase的在线画图及图片处理工具
梁植淋的博客
06-11 3671
简介       这是基于HTML5的Canvas而实现的在线画图及简单图片处理的工具，是我的计算机图形学期末课程设计作业。主要功能包括：画图、颜色反转、转灰度图、阴影效果、横向渐变、纵向渐变等。处理好的图片还能以png的格式下载到本地。不过，由于花的时间不多，没能深一步完善，不足之处还请见谅！ 功能展示 画图 下载到本地的png 灰度图效果 颜色反转效
HTML5 Canvas实现web画图之自由画笔
09-27
能实现web端以及手机端同时使用
Canvas：实现在线画板操作
最新发布
ztK63LrD的博客
07-10 1590
想象一下，用几行代码就能创造出如此逼真的图像和动画，仿佛将艺术与科技完美融合，前端开发的Canvas技术正是这个数字化时代中最具魔力的一环，它不仅仅是网页的一部分，更是一个无限创意的画布，一个让你的想象力自由驰骋的平台。
canvas 画笔
weixin_44134551的博客
04-14 137
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/> <title>canvas写字</title> <script src="jq
HTML5 canvas 在线画笔绘图工具（四）
gongztPM的专栏
02-28 1058
HTML5画图命令 图形的绘制是由TDrawHandler与TCommand 协同工作完成。 TDrawHandler需要完成以下工作 1、聚集类用于管理绘图的命令 TCommand 2、管理鼠标事件 ，鼠标点击第一下开始绘图，鼠标点击第二下绘图完成。在点第一次和第二次之间在画板上拖动鼠标时系统动态的根据鼠标位置绘图。 3、将所有绘图命令生成json数据，以便于保存。 4、打开新的图形
canvas 画笔、橡皮擦和文本输入
qq_28510897的博客
11-05 409
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="toolba
使用HTML5 Canvas的画笔应用程序
04-05
在"使用HTML5 Canvas的画笔应用程序"中，我们主要探讨的是如何利用HTML5的Canvas API创建一个在线画笔应用，用户可以在浏览器上进行绘画创作。 首先，Canvas是一个基于矢量图形的元素，通过JavaScript来操纵其上的...
html5在线画图工具,HTML5 Canvas画板画图工具 可定义笔刷和画布
weixin_30677191的博客
05-30 857
本文作者html5tricks，转载请注明出处下面我们来简单地分析一下实现这个HTML5网页画板的原理及代码，代码由HTML以及Javascript组成，主要还是Javascript代码。HTML代码：HTML代码非常简单，仅仅是构造了一个canvas容器，我们的画板就在这个地方生成。Javascript代码：首先我们通过一组变量来定义画板的样式，以及一些数据的初始化：var canvas;var...
HTML5 Canvas火焰画笔动画特效.zip
09-26
总结起来，"HTML5 Canvas火焰画笔动画特效"是一个结合了HTML5 Canvas、jQuery和可能的jQuery插件的技术示例，展示了如何利用这些工具创建引人注目的网页动画。对于前端开发者来说，理解并学习这种特效的实现可以帮助...
一个基于HTML5 Canvas的鼠标画笔效果.zip
02-12
总的来说，“一个基于HTML5 Canvas的鼠标画笔效果.zip”项目展示了如何利用HTML5的Canvas API创建一个简单的在线绘图应用。通过学习这个项目，你可以深入了解Canvas的绘图原理，掌握交互式Web应用开发的基础技能，这...
一个基于canvas的移动端图片编辑插件
08-08
一个基于canvas的移动端图片编辑插件
html5 canvas实现的绘图工具自由绘制图形画板源码.zip
07-04
这是一款基于html5 canvas实现的绘图工具自由绘制图形画板源码，具备画板基本的线、矩形、铅笔、圆、五角星等绘图工具，及颜色与边框的填充，橡皮擦等功能。绘图完毕还具有保存图片的功能。是一款非常实用的经典html5画板工具源码。建议使用支持html5与css3效果较好的火狐或谷歌等浏览器预览本源码。
可定义笔刷和画布的HTML5 Canvas画板画图工具
09-26
HTML5画板画图工具是一款可定义笔刷和画布的HTML5 Canvas画板画图工具。
基于HTML5 Canvas和jQuery 的画图工具的实现
08-13
HTML5 Canvas和jQuery是现代网页开发中的两个重要技术，它们结合使用可以创建出功能丰富的交互式画图工具。Canvas作为HTML5的一个核心特性，提供了一种在浏览器中绘制图形的方法，而jQuery则是一个广泛使用的...
canvas实现简单的画笔功能
热门推荐
fanzhang1990的专栏
04-13 1万+
模仿笔画 #_canvas{ background-color: rgb(240,240,240); } sorry, your broswer does not support html5! var canvas_ = document.getElementById("_canvas"); //全屏 canvas_.setAttribute("width",
Android之Canvas画笔和画布
weixin_42370957的博客
12-01 2586
久违的Canvas画布，终于学到这里了，学完以后附上博文一篇以便日后记不住。 目录 一、Canvas（画布） 二、Paint（画笔） 三、实例     涉及的相关知识点             1、绘制安卓机器人             2.绘制文本             3.绘制图片            4.绘制路径： 首先我觉得最难易懂大的一点是Canvas里面的四个坐...
canvas简单的实现画笔功能
zhangbiaoxiaoming的博客
10-22 6530
还是直接上代码。（自己写的，可能代码布局有点乱，进步中，加油） &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;&amp;lt;/title&a
Canvas画笔的基本使用
流楚丶格念的博客
02-03 4867
文章目录Canvas画笔的基本使用图形绘制设置样式画笔实例练习渐变色绘制镂空的房子绘制坐标网格绘制坐标系绘制坐标点绘制折线图参考文档 Canvas画笔的基本使用 图形绘制 需要理解些概念： 路径的概念 路径的绘制 描边 stroke() 填充 fill() 闭合路径 手动闭合 程序闭合 closePath() 填充规则(非零环绕) 开启新的路径 beginPath() 设置样式 画笔的状态 lineWidth 线宽，默认1px lineCap 线末端类型：(butt默
HTML5 Canvas绘图API详解与实例应用
HTML5 Canvas的绘图API提供了一套丰富的工具，使得开发者能够灵活地创建各种复杂的图形和交互式体验。通过组合使用这些API，无论是创建基本的线条图形，还是实现更高级的图形效果，都能在Web页面上得到实现。在实际...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值