绘画板 02——抽象并实现图形绘制功能

本贴最后更新于 2983 天前,其中的信息可能已经天翻地覆

github 地址: https://github.com/wangyuheng/painter

DEMO 地址: http://painter.crick.wang/

针对上个版本的基础代码进行抽象和封装

将所有的图形绘制工具,都“继承”一个 DrawTool 工具类,在此工具类中绑定、解绑事件,代码如下

(function() {
	var defaultListener = {
		mousedown: function() {
			console.log('mousedown you should implement this function!');
		},
		mousemove: function() {
			console.log('mousemove you should implement this function!');
		},
		mouseup: function() {
			console.log('mouseup   you should implement this function!');
		}
	};
	var DrawTool = {
		init: function(svgDoc, listeners) {
			var l = $.extend({}, defaultListener, listeners);
			svgDoc.on('mousedown', l.mousedown);
			svgDoc.on('mousemove', l.mousemove);
			svgDoc.on('mouseup', l.mouseup);
		},
		stop: function(svgDoc, listeners) {
			var l = $.extend({}, defaultListener, listeners);
			svgDoc.off('mousemove', l.mousemove);
			svgDoc.off('mousedown', l.mousedown);
			svgDoc.off('mouseup', l.mouseup);
		}
	};


	this.DrawTool = DrawTool;
})();

所有 js 独立代码都采用闭包形式,避免的参数污染。 拆分后的目录结构如下

1474421007892

还是以矩形为例,Rect 在构造函数中继承使用了 DrawTool 的 init 方法,并重写 stop 方法,暴露出去。

var Rect = function(parentEle) {
    parent = parentEle;
    svgDoc = parent.doc();
    DrawTool.init(svgDoc, listener);
    this.stop = function () {
        DrawTool.stop(svgDoc, listener);
    };
};

this.DrawTool.Rect = Rect;

通过在 Rect 类内部定义 mousedown、mousemove、mouseup 事件方法,调用 svgjs 提供的绘制方法,实现图形的绘制工作。完整代码如下:

(function() {

	var parent = null;
	var drawing = false;
	var element = null;
	var startPoint = null;

	function mousedown(event) {
		console.log('rect mousedown');
		drawing = true;
		startPoint = svgDoc.transformPoint(event);
		element = parent.rect(0, 0).style("fill-opacity", '0.0').stroke({
			width: '2',
			color: '#000000'
		});
	}

	function mousemove(event) {
		console.log('rect mousemove');
		if (drawing) {
			var svgPoint = svgDoc.transformPoint(event);
			var x = svgPoint.x;
			var y = svgPoint.y;

			var newWidth = x - startPoint.x;
			var newHeight = y - startPoint.y;
			var startX = startPoint.x;
			var startY = startPoint.y;
			if (newWidth < 0) {
				startX += newWidth;
			}

			if (newHeight < 0) {
				startY += newHeight;
			}
			newWidth = Math.abs(newWidth);
			newHeight = Math.abs(newHeight);
			element.x(startX).y(startY).width(newWidth).height(newHeight);
		}
	};

	function mouseup(event) {
		console.log('rect mouseup ' + element);
		drawing = false;
	}

	var listener = {
		mousedown: mousedown,
		mousemove: mousemove,
		mouseup: mouseup,
	};


	var Rect = function(parentEle) {
		parent = parentEle;
		svgDoc = parent.doc();
		DrawTool.init(svgDoc, listener);
		this.stop = function () {
			DrawTool.stop(svgDoc, listener);
		};
	};

	this.DrawTool.Rect = Rect;

})();

有一个特殊的类为折线 polyline 工具类,此图形为连续绘制,需要记录上一个 element,并且在 stop 方法中清空之前的 element,并且监听鼠标右键点击事件,结束图形绘制。
阻止鼠标右键方法为

function mousedown(event) {
    if (event.button == 2) {
        document.oncontextmenu=function(){return false;}
        drawing=false;
        points  = [];
        element = null;
        return;
    }
    if (!drawing) {
        drawing = true;
        var currPoint = svgDoc.transformPoint(event);
        points.push([currPoint.x, currPoint.y]);
    }
}

至此,已完成图形的基本绘制功能

  • 开源

    Open Source, Open Mind, Open Sight, Open Future!

    408 引用 • 3574 回帖 • 1 关注
  • SVG
    24 引用 • 73 回帖
  • Painter
    14 引用 • 31 回帖

相关帖子

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • R

    很赞,加点应用场景的创意就牛掰了。

    1 回复
  • 其他回帖
  • crick77
    作者

    让 V 大给我做套样式吧

    1 回复
  • 88250

    我感觉 demo 已经很赞了啊

  • crick77
    作者

    一起集思广益啊

  • 查看全部回帖

推荐标签 标签

  • SVN

    SVN 是 Subversion 的简称,是一个开放源代码的版本控制系统,相较于 RCS、CVS,它采用了分支管理系统,它的设计目标就是取代 CVS。

    29 引用 • 98 回帖 • 683 关注
  • 小薇

    小薇是一个用 Java 写的 QQ 聊天机器人 Web 服务,可以用于社群互动。

    由于 Smart QQ 从 2019 年 1 月 1 日起停止服务,所以该项目也已经停止维护了!

    34 引用 • 467 回帖 • 743 关注
  • 外包

    有空闲时间是接外包好呢还是学习好呢?

    26 引用 • 232 回帖 • 4 关注
  • Shell

    Shell 脚本与 Windows/Dos 下的批处理相似,也就是用各类命令预先放入到一个文件中,方便一次性执行的一个程序文件,主要是方便管理员进行设置或者管理用的。但是它比 Windows 下的批处理更强大,比用其他编程程序编辑的程序效率更高,因为它使用了 Linux/Unix 下的命令。

    123 引用 • 74 回帖 • 1 关注
  • Solo

    Solo 是一款小而美的开源博客系统,专为程序员设计。Solo 有着非常活跃的社区,可将文章作为帖子推送到社区,来自社区的回帖将作为博客评论进行联动(具体细节请浏览 B3log 构思 - 分布式社区网络)。

    这是一种全新的网络社区体验,让热爱记录和分享的你不再感到孤单!

    1434 引用 • 10054 回帖 • 489 关注
  • 尊园地产

    昆明尊园房地产经纪有限公司,即:Kunming Zunyuan Property Agency Company Limited(简称“尊园地产”)于 2007 年 6 月开始筹备,2007 年 8 月 18 日正式成立,注册资本 200 万元,公司性质为股份经纪有限公司,主营业务为:代租、代售、代办产权过户、办理银行按揭、担保、抵押、评估等。

    1 引用 • 22 回帖 • 762 关注
  • Typecho

    Typecho 是一款博客程序,它在 GPLv2 许可证下发行,基于 PHP 构建,可以运行在各种平台上,支持多种数据库(MySQL、PostgreSQL、SQLite)。

    12 引用 • 65 回帖 • 439 关注
  • InfluxDB

    InfluxDB 是一个开源的没有外部依赖的时间序列数据库。适用于记录度量,事件及实时分析。

    2 引用 • 73 关注
  • CentOS

    CentOS(Community Enterprise Operating System)是 Linux 发行版之一,它是来自于 Red Hat Enterprise Linux 依照开放源代码规定释出的源代码所编译而成。由于出自同样的源代码,因此有些要求高度稳定的服务器以 CentOS 替代商业版的 Red Hat Enterprise Linux 使用。两者的不同在于 CentOS 并不包含封闭源代码软件。

    238 引用 • 224 回帖 • 1 关注
  • 倾城之链
    23 引用 • 66 回帖 • 137 关注
  • SEO

    发布对别人有帮助的原创内容是最好的 SEO 方式。

    35 引用 • 200 回帖 • 22 关注
  • GitHub

    GitHub 于 2008 年上线,目前,除了 Git 代码仓库托管及基本的 Web 管理界面以外,还提供了订阅、讨论组、文本渲染、在线文件编辑器、协作图谱(报表)、代码片段分享(Gist)等功能。正因为这些功能所提供的便利,又经过长期的积累,GitHub 的用户活跃度很高,在开源世界里享有深远的声望,并形成了社交化编程文化(Social Coding)。

    209 引用 • 2031 回帖
  • Love2D

    Love2D 是一个开源的, 跨平台的 2D 游戏引擎。使用纯 Lua 脚本来进行游戏开发。目前支持的平台有 Windows, Mac OS X, Linux, Android 和 iOS。

    14 引用 • 53 回帖 • 530 关注
  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    22378 引用 • 89573 回帖
  • 星云链

    星云链是一个开源公链,业内简单的将其称为区块链上的谷歌。其实它不仅仅是区块链搜索引擎,一个公链的所有功能,它基本都有,比如你可以用它来开发部署你的去中心化的 APP,你可以在上面编写智能合约,发送交易等等。3 分钟快速接入星云链 (NAS) 测试网

    3 引用 • 16 回帖
  • C

    C 语言是一门通用计算机编程语言,应用广泛。C 语言的设计目标是提供一种能以简易的方式编译、处理低级存储器、产生少量的机器码以及不需要任何运行环境支持便能运行的编程语言。

    85 引用 • 165 回帖 • 3 关注
  • Thymeleaf

    Thymeleaf 是一款用于渲染 XML/XHTML/HTML5 内容的模板引擎。类似 Velocity、 FreeMarker 等,它也可以轻易的与 Spring 等 Web 框架进行集成作为 Web 应用的模板引擎。与其它模板引擎相比,Thymeleaf 最大的特点是能够直接在浏览器中打开并正确显示模板页面,而不需要启动整个 Web 应用。

    11 引用 • 19 回帖 • 355 关注
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库,强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery,是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 724 关注
  • 机器学习

    机器学习(Machine Learning)是一门多领域交叉学科,涉及概率论、统计学、逼近论、凸分析、算法复杂度理论等多门学科。专门研究计算机怎样模拟或实现人类的学习行为,以获取新的知识或技能,重新组织已有的知识结构使之不断改善自身的性能。

    83 引用 • 37 回帖
  • Mobi.css

    Mobi.css is a lightweight, flexible CSS framework that focus on mobile.

    1 引用 • 6 回帖 • 733 关注
  • WebSocket

    WebSocket 是 HTML5 中定义的一种新协议,它实现了浏览器与服务器之间的全双工通信(full-duplex)。

    48 引用 • 206 回帖 • 334 关注
  • Maven

    Maven 是基于项目对象模型(POM)、通过一小段描述信息来管理项目的构建、报告和文档的软件项目管理工具。

    186 引用 • 318 回帖 • 304 关注
  • GitLab

    GitLab 是利用 Ruby 一个开源的版本管理系统,实现一个自托管的 Git 项目仓库,可通过 Web 界面操作公开或私有项目。

    46 引用 • 72 回帖 • 2 关注
  • App

    App(应用程序,Application 的缩写)一般指手机软件。

    91 引用 • 384 回帖 • 1 关注
  • 脑图

    脑图又叫思维导图,是表达发散性思维的有效图形思维工具 ,它简单却又很有效,是一种实用性的思维工具。

    26 引用 • 84 回帖 • 1 关注
  • Facebook

    Facebook 是一个联系朋友的社交工具。大家可以通过它和朋友、同事、同学以及周围的人保持互动交流,分享无限上传的图片,发布链接和视频,更可以增进对朋友的了解。

    4 引用 • 15 回帖 • 454 关注
  • danl
    132 关注