Fabric.js高级点的教程1--添加辅助线的方法

最新推荐文章于 2024-07-30 17:53:07 发布

weixin_34119545

最新推荐文章于 2024-07-30 17:53:07 发布

阅读量3.5k

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/xmqywx/blog/1941539

版权

本文介绍了如何在Fabric.js项目中添加辅助线功能，类似于Photoshop中的参考线。通过引入aligning_guidelines.js文件，并调整相关变量实现颜色和宽度的定制。作者分享了一个有趣的事实，这个功能曾被标价$200。他将继续分享添加背景表格的方法，并欢迎遇到Fabric.js问题的读者一起交流。

摘要由CSDN通过智能技术生成

为什么80%的码农都做不了架构师？>>>

Fabric.js 非常的强大，但是国内的资源教程很少，最近想加个功能给元素添加辅助参考线（类似 http://jsfiddle.net/elin/A6CpP/ ）。这样某个元素移动缩放都会根据其他元素有个参考，就行ps里面的功能一样。虽然类似的功能我其他的项目有单独实现过，但是我本着能懒就懒的原则，于是乎我google了一下，官方的bug里有提到，安利给大家。

首先下载这个文件到你的项目中，

https://github.com/fabricjs/fabric.js/blob/master/lib/aligning_guidelines.js

然后你想import可以稍微加一句

export default initAligningGuidelines;

原文件（为了防止有一天上面文件链接失效，原谅我这么粗俗的贴出下面这么长的原代码，呃呃呃。。：）

function initAligningGuidelines(canvas) {

	var ctx = canvas.getSelectionContext(),
		aligningLineOffset = 5,
		aligningLineMargin = 4,
		aligningLineWidth = 1,
		aligningLineColor = 'rgb(255,255,0)',
		viewportTransform,
		zoom = 1;

	function drawVerticalLine(coords) {
		drawLine(
			coords.x + 0.5,
			coords.y1 > coords.y2 ? coords.y2 : coords.y1,
			coords.x + 0.5,
			coords.y2 > coords.y1 ? coords.y2 : coords.y1);
	}

	function drawHorizontalLine(coords) {
		drawLine(
			coords.x1 > coords.x2 ? coords.x2 : coords.x1,
			coords.y + 0.5,
			coords.x2 > coords.x1 ? coords.x2 : coords.x1,
			coords.y + 0.5);
	}

	function drawLine(x1, y1, x2, y2) {
		ctx.save();
		ctx.lineWidth = aligningLineWidth;
		ctx.strokeStyle = aligningLineColor;
		ctx.beginPath();
		ctx.moveTo(((x1+viewportTransform[4]