用canvas实现点击拖拉生成框

最新推荐文章于 2024-06-27 10:49:15 发布

一蓑烟雨一江秋

最新推荐文章于 2024-06-27 10:49:15 发布

阅读量627

点赞数

分类专栏： canvas 文章标签： canvas生成框

本文链接：https://blog.csdn.net/weixin_41842994/article/details/103507932

版权

借鉴于：https://www.cnblogs.com/sapho/p/6202898.html
插件：JCanvas，jquery-ui，jquery
主要使用有点击拖拽生成矩形框，可拖拉（上下左右），可拉伸（右下角），可移动（左上角），可点击拖拽canvas画布。由于时间原因未实现点击拖拽过程中拉动canvas画布。（图片大小和canvas宽高一致）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标拖动绘制矩形框(canvas)</title>
</head>
<body>

<button id="cexiao">撤销</button>
<button id="qingkong">清空</button>
<button id="tuodong">拖动</button>
<button id="quxiaotuodong">取消拖动</button>
<div style="width:500px;height: 500px;overflow: hidden;" class="y-header">
	<canvas id="canvas" width="1366" height="768" style="border: 1px solid #000;"></canvas>
</div>
<script src="js/jquery.min.js"></script>
<script src="js/jcanvas.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js" ></script>
<script>
	var canvasId = 'canvas';//表示操作的canvas的id
	var penColor = 'blue';//表示画笔颜色
	var penWidth = 2;//表示画笔粗值
	var penDarw = '0';//-1表示拖拽画布,
	var determine = 2; //表示拖拽框时候允许的边框判定误差 2px
	var staticName = "block"
	
    var layerNum=0;
	var layerList = [];//画布上存储对象的集合
	var canvas=null;//画布对象
	
	var sign = 0;//0 无动作;1 表示画框动作;2 表示左框动作;3 表示右框动作,4 表示上框动作;5 表示下框动作;6 表示左上角可移动框;7 右下角拉伸
	var follow = 0;// 0 表示无点击/释放;1 表示点击canvas;
	
	var layerObj = null;//表示当前被点击的框
	var drawObj = null;//表示最后一次被绘画的框
	
    var CanvasExt = {
    	//监听行为。
        drawRect:function(penColor,strokeWidth){
            var that=this;
            canvas = document.getElementById(canvasId);
            //canvas 的矩形框 画布
            CanvasExt.drawImg();
            var canvasRect = canvas.getBoundingClientRect();
            canvasLeft = canvasRect.left;
            canvasTop  = canvasRect.top;
            //画笔的颜色和粗细
            that.penColor=penColor;
            that.penWidth=strokeWidth;
            //矩形框的左上角坐标
            var layerName="";
            var clickx=0;//鼠标点击那一瞬间的x
            var clicky=0;//鼠标点击那一瞬间的y

最低0.47元/天解锁文章

一蓑烟雨一江秋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用canvas实现点击拖拉生成框

借鉴于：https://www.cnblogs.com/sapho/p/6202898.html插件：JCanvas，jquery-ui，jquery主要使用有点击拖拽生成矩形框，可拖拉（上下左右），可拉伸（右下角），可移动（左上角），可点击拖拽canvas画布。由于时间原因未实现点击拖拽过程中拉动canvas画布。<!DOCTYPE html><html lang="e...
复制链接

扫一扫

专栏目录