使用Tdrag插件,需要先引入jq
<!-- 背景画布 -->
<canvas id="canvas"></canvas>
<!-- 图形画布 -->
<canvas id="gCanvas"></canvas>
<!-- 添加图形 -->
<div class="controller">
<div class="button" onclick="addGeometry('rect')">矩形</div>
<div class="button" onclick="addGeometry('circle')">圆形</div>
<div class="button" onclick="finsh()">保存</div>
<div style="padding: 0;color: #fff;font-size: 12px;" id="geometryArrLen"> </div>
</div>
<!-- 编辑时图形移动的容器 -->
<div id="move">
</div>
<div id="tmp" style="display: none;">
<div class="point left-top" position="left-top"></div>
<div class="point top" position="top"></div>
<div class="point right-top" position="right-top"></div>
<div class="point left" position="left"></div>
<div class="point right" position="right"></div>
<div class="point left-bottom" position="left-bottom"></div>
<div class="point bottom" position="bottom"></div>
<div class="point right-bottom" position="right-bottom"></div>
</div>
<!-- 操作图形菜单 -->
<ul class="menu">
<li class="menu-item" onclick="delGeometry()">删除</li>
<li class="menu-item" onclick="editGeometry()">修改</li>
</ul>
获取两个canvas,一个用作背景一个放置图形
// 存储的图形
var geometryArr = [];
// 当前画布上的图形
var currGeometryArr = [];
// 当前放置了两块画布,一块防置背景,一块放置图形,以免清除图形时将背景清除
// 背景画布
var gCanvas = document.getElementById("gCanvas");
gCanvas.width=gCanvas.clientWidth;
gCanvas.height=gCanvas.clientHeight;
var gCtx = gCanvas.getContext("2d");
// 图形画布
var canvas = document.getElementById("canvas");
canvas.width=canvas.clientWidth;
canvas.height=canvas.clientHeight;
var ctx = canvas.getContext("2d");
// 选中的图形下标
var selectGeometry = -1;
// 初始化背景
var img = new Image();
img.src = "./homeImg/bj.jpg";
img.onload = function(){
// 这一段如果不等img加载完成会无法绘制出图片
ctx.drawImage(img, 0, 0, canvas.clientWidth, canvas.clientHeight);
geometryArr = window.localStorage.getItem("geometryArr") || [];
$("#geometryArrLen").text("数量:0");
// currGeometryArr = geometryArr;
if(geometryArr && geometryArr.length > 0){
geometryArr = JSON.parse(geometryArr);
$("#geometryArrLen").text("数量:" + geometryArr.length);
for (let i = 0; i < geometryArr.length; i++) {
const geometry = geometryArr[i];
geometry.path = new Path2D();
if(geometry.g == "rect"){
drawPathRect(gCtx, geometry.path, geometry.size, geometry.points, geometry.color, geometry.type)
}else if(geometry.g == 'circle'){
drawPathCircle(gCtx, geometry.path, geometry.size, geometry.points, geometry.color, geometry.type)
}
}
}
}
判断当前点击的是哪一个图形
使用isPointInPath 和 Path 2D来对图形进行绘制和判断
https://developer.mozilla.org/zh-CN/docs/Web/API/Path2D
// 监听左键点击图形,获取当前点击的图形
gCanvas.addEventListener('click', function(e){
$(".menu").css({"display": "none"})
const canvasInfo = canvas.getBoundingClientRect();
for (let i = 0; i < geometryArr.length; i++) {
const geometry = geometryArr[i];
if(geometry.path && gCtx.isPointInPath(geometry.path, e.clientX, e.clientY)){
// window.open(geometry.link);
selectGeometry = i;
return
}
}
})
图形绘制到画布上之后对图形进行删除和修改位置的操作
// 监听右键
window.addEventListener('contextmenu',function(e){
e.preventDefault();
})
gCanvas.addEventListener('contextmenu',function(e){
for (let i = 0; i < geometryArr.length; i++) {
const geometry = geometryArr[i];
if(geometry.path && gCtx.isPointInPath(geometry.path, e.clientX, e.clientY)){
selectGeometry = i;
geometryMenu(e.clientX + 3, e.clientY + 3);
// window.open(geometry.link);
return
}
}
})
拖动图形四周改变元素的大小
// 改变图形大小的操作
function bindPoint(geometry){
var points = {
top: false,
left: false,
right: false,
bottom: false
}
$(".point").mousedown(function(e){
let that = this
let pointAttr = $(that).attr("position");
if(pointAttr.indexOf('left') > -1){
points.left = true;
}
if(pointAttr.indexOf('top') > -1){
points.top = true;
}
if(pointAttr.indexOf('right') > -1){
points.right = true;
}
if(pointAttr.indexOf('bottom') > -1){
points.bottom = true;
}
let eleSize = $(that).parent();
var reg = new RegExp("px", "g")
let eleMsg = {
w: eleSize.width(),
h: eleSize.height(),
left: eleSize.css("left").replace(reg, "")*1,
top: eleSize.css("top").replace(reg, "")*1
}
let mouseXY = {
x: e.clientX,
y: e.clientY
}
// 禁止拖拽
// 因为拖拽的部分使用的是Tdrag.js,在此处进行拉伸元素的时候会将图形进行拖拽,在拉伸的时候需要先禁用拖拽
$.disable_cloose();
$(document).mousemove(function(e){
if(!(points.left || points.right || points.top || points.bottom)){
return
}
if(points.left){
if(eleMsg.w + mouseXY.x - e.clientX <= 30){
eleSize.width(30);
eleSize.css("left", eleMsg.left+'px');
}else{
eleSize.width(eleMsg.w + mouseXY.x - e.clientX);
eleSize.css("left", e.clientX+'px');
}
}
if(points.top){
if(eleMsg.h + mouseXY.y - e.clientY <= 30){
eleSize.height(30);
eleSize.css("top", eleMsg.top+'px');
}else{
eleSize.height(eleMsg.h + mouseXY.y - e.clientY);
eleSize.css("top", e.clientY+'px');
}
}
if(points.right){
if(eleMsg.w - mouseXY.x + e.clientX <= 30){
eleSize.width(30);
}else{
eleSize.width(eleMsg.w - mouseXY.x + e.clientX);
}
}
if(points.bottom){
if(eleMsg.h - mouseXY.y + e.clientY <= 30){
eleSize.height(30);
}else{
eleSize.height(eleMsg.h - mouseXY.y + e.clientY);
}
}
geometry.size.w = eleSize.width();
geometry.points.x = eleSize.css("left").replace(reg, "")*1;
geometry.size.h = eleSize.height();
geometry.points.y = eleSize.css("top").replace(reg, "")*1;
})
})
$(document).mouseup(function(e){
// 开启拖拽
$.disable_open();
points = {
'top': false,
'left': false,
'right': false,
'bottom': false
}
})
}
以下是对图形进行操作的方法
// 弹出操作图形的菜单
function geometryMenu(x, y){
$(".menu").css({"display": "block", "left": x + "px", "top": y + "px"})
}
// 删除图形
function delGeometry(){
let geometry = geometryArr[selectGeometry];
gCtx.clearRect(geometry.points.x, geometry.points.y, geometry.size.w, geometry.size.h);
geometryArr.splice(selectGeometry, 1);
$(".menu").css({"display": "none"});
selectGeometry = -1;
}
// 编辑图形位置图形
function editGeometry(){
$(".menu").css({"display": "none"});
let geometry = geometryArr[selectGeometry];
delGeometry();
addGeometry(geometry.g, geometry);
selectGeometry = -1;
}
// 添加图形
function addGeometry(type, geometryObj){
let id = type + (new Date()).getTime().toString(16).toLocaleUpperCase();
let div;
let sColor = '#' + Math.random().toString(16).substr(2, 6).toUpperCase();
let geometry = geometryObj || {
points: {
x: 100,
y: 100
},
size: {
w: 30,
h: 30
},
g: type,
color: sColor,
type: "fill",
link: "http://www.baidu.com",
path: "",
bgImage: "./homeImg/bj.jpg"
}
if(type == "rect"){
div = '<div style="position: absolute;left: ' + geometry.points.x + 'px; top: ' + geometry.points.y + 'px;width: ' + geometry.size.w + 'px;height: ' + geometry.size.h + 'px;background: ' + geometry.color + ';" id= '+ id + '></div>'
}else if(type == "circle"){
div = '<div style="position: absolute;left: ' + geometry.points.x + 'px; top: ' + geometry.points.y + 'px;width: ' + geometry.size.w + 'px;height: ' + geometry.size.h + 'px;background: ' + geometry.color + ';border-radius: 50%;" id= '+ id + '></div>'
}
$("#move").append(div);
// $("#" + id).css({
// "background": "url(" + geometry.bgImage + ") center no-repeat",
// "background-size": "100% 100%"
// });
$("#tmp>div").clone().appendTo("#" + id);
bindPoint(geometry);
$("#" + id).Tdrag({
scope: "body",
cbEnd:function(e){
geometry.points.x = $("#" + id).offset().left;
geometry.points.y = $("#" + id).offset().top;
}
});
geometryArr.push(geometry);
}
// 绘制path2d的矩形
function drawPathRect(ctx, path, size, points, color, type){
path.rect(points.x, points.y, size.w, size.h);
ctx[type + 'Style'] = color;
ctx[type](path);
}
// 绘制path2d的圆
function drawPathCircle(ctx, path, size, points, color, type){
if (size.w != size.h) {
let sw = size.w / 2;
let sh = size.h / 2;
path.ellipse(points.x + sw, points.y + sh, sw, sh, 0, 0, 2 * Math.PI);
}else{
let r = size.w / 2;
path.arc(points.x + r, points.y + r, r, 0, 2 * Math.PI);
}
ctx[type + 'Style'] = color;
ctx[type](path);
}
/*
points: 绘制的点
color: 颜色
type: 类型 空心stroke,实心 fill
*/
function drawRect(ctx, points, color, type){
ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);
for (let i = 1; i < points.length; i++) {
const point = points[i];
ctx.lineTo(point.x, point.y);
}
ctx[type + 'Style'] = color;
ctx.closePath();
ctx[type]();
}
function finsh() {
window.location.reload();
window.localStorage.setItem("geometryArr", JSON.stringify(geometryArr));
// alert("保存本地成功!!!");
}