<html>
<head>消前
<meta charset="UTF-8">
<title></title>
<script src="js/jquery-2.1.3.min.js"></script>
</head>拿禅清
<body>
<袭皮canvas id="myCanvas" width="600" height="800" style="display:blockposition:absolute"></canvas>
<script>
//画图
arr = [{
x: 10,
y: 10,
width: 50,
height: 50,
}, {
x: 110,
y: 10,
width: 50,
height: 50,
}, {
x: 110,
y: 110,
width: 50,
height: 50,
}, {
x: 10,
y: 110,
width: 50,
height: 50,
}, {
x: 10,
y: 210,
width: 50,
height: 50,
}
, {
x: 110,
y: 210,
width: 50,
height: 50,
}
, {
x: 10,
y: 310,
width: 50,
height: 50,
}
, {
x: 110,
y: 310,
width: 50,
height: 50,
}
]
function line(i) {
list = [{
x: 35,
y: 35,
},{
x: 135,
y: 35,
},{
x: 135,
y: 135,
},{
x: 35,
y: 135,
},{
x: 35,
y: 235,
},{
x: 135,
y: 235,
},{
x: 35,
y: 335,
},{
x: 135,
y: 335,
}
]
if(i == 1) {
ctx.moveTo(list[0].x, list[0].y)
for(var j=0j<ij++){
ctx.lineTo(list[j+1].x, list[j+1].y)
}
ctx.stroke()
}
if(i == 2) {
ctx.moveTo(list[0].x, list[0].y)
for(var j=0j<ij++){
ctx.lineTo(list[j+1].x, list[j+1].y)
}
ctx.stroke()
}
if(i == 3) {
ctx.moveTo(list[0].x, list[0].y)
for(var j=0j<ij++){
ctx.lineTo(list[j+1].x, list[j+1].y)
}
ctx.stroke()
}if(i==4){
ctx.moveTo(list[0].x, list[0].y)
for(var j=0j<ij++){
ctx.lineTo(list[j+1].x, list[j+1].y)
}
ctx.stroke()
}if(i==5){
ctx.moveTo(list[0].x, list[0].y)
for(var j=0j<ij++){
ctx.lineTo(list[j+1].x, list[j+1].y)
}
ctx.stroke()
}
if(i==6){
ctx.moveTo(list[0].x, list[0].y)
for(var j=0j<ij++){
ctx.lineTo(list[j+1].x, list[j+1].y)
}
ctx.stroke()
}
if(i==7){
ctx.moveTo(list[0].x, list[0].y)
for(var j=0j<ij++){
ctx.lineTo(list[j+1].x, list[j+1].y)
}
ctx.stroke()
}
}
cvs = document.getElementById("myCanvas")
ctx = cvs.getContext('2d')
ctx.fillText("1",35,10)
ctx.fillText("2",30,470)
ctx.fillText("3",30,400)
ctx.fillText("4",30,330)
ctx.fillText("5",30,260)
ctx.fillText("6",30,190)
ctx.fillText("7",30,120)
ctx.fillText("8",30,50)
draw()
function draw(p) {
/* ctx.clearRect(0, 0, cvs.width, cvs.height)*/
var who = []
arr.forEach(function(v, i) {
ctx.beginPath()
ctx.rect(v.x, v.y, v.width, v.height)
ctx.stroke()
if(p &&ctx.isPointInPath(p.x, p.y)) {
//如果传入了事件坐标，就用isPointInPath判断一下
//如果当前环境覆盖了该坐标，就将当前环境的index值放到数组里
ctx.fillStyle = "red"
ctx.beginPath()
ctx.rect(v.x, v.y, v.width, v.height)
ctx.fill()
$(".road").append(v.x,v.y,"--")
who.push(i)
line(i)
} else {
ctx.clearRect(v.x, v.y, v.width, v.height)
}
})
//根据数组中的index值，可以到arr数组中找到相应的元素。
return who
}
//绑定事件
cvs.addEventListener('click', function(e) {
var t=$(".road").html()
if(t!=""){
alert("已经选择过路径了")
return false
}
p = getEventPosition(e)
draw(p)
}, false)
//判断对象发生的位置
function getEventPosition(ev) {
var x, y
if(ev.layerX || ev.layerX == 0) {
x = ev.layerX
y = ev.layerY
} else if(ev.offsetX || ev.offsetX == 0) { // Opera
x = ev.offsetX
y = ev.offsetY
}
return {
x: x,
y: y
}
}
</script>
<div style="position:absolutebottom:18%">
路径：<textarea style="width: 400pxheight:100pxfont-size:22px " class="road"></textarea>
</div>
<button onclick="sx()" style="bottom:40% left:200pxposition:absolute">重选</button>
<script>
function sx(){
history.go(0)
}
</script>
</body>
</html>
canvas不可以拖动。你也不可以直接拖动canvas里陆饥面的任何元素，包括已经载入的图片（实际上图片已经成为canvas的一部分）。先不说连线，因为我不清楚你要让笑怎样连线。先拿一坦悉含张图片来说。
思路：canvas不可以拖动，但div可以啊。考虑div和canvas。位置属性设置为absolute，否则容易出错。
注意：将div的z-index值设置大点，保证其在Canvas画面之上。
将div的大小设置成图片的大小。
图片不是在div里面，也没必要。
拖动div，拖动到新位置X1,Y1时，清除canvas的图片：ctx.clearRect(X,Y,W,H)X是上一个位置图片在canvas中的横坐标，Y是上一个位置的纵坐标，W是图片宽度，H是图片高度。
绘制新位置下的图片：ctx.drawImage(img,X,Y)img是一个图片节点。不会用drawImage请百度哈。
【【【具体代码：】】】
div拖动：
var divObj=document.getElementById("cover")var moveFlag=false
divObj.onmousedown=function(e){
moveFlag=true
var clickEvent=window.event||e
var mwidth=clickEvent.clientX-divObj.offsetLeft
var mheight=clickEvent.clientY-divObj.offsetTop
document.onmousemove=function(e){
var moveEvent=window.event||e
if(moveFlag){
divObj.style.left=moveEvent.clientX-mwidth+"px"
divObj.style.top=moveEvent.clientY-mheight+"px"
divObj.onmouseup=function(){
moveFlag=false
}
}
}
}
来解读下这段代码：首先获取div对象，设置拖拽标志moveFlage,当onmousedown时为true表示可以拖动，当onmouseup时为false表示不能拖动了。
var clickEvent=window.event||evar mwidth=clickEvent.clientX-divObj.offsetLeft
var mheight=clickEvent.clientY-divObj.offsetTop
这三行代码是为了修正光标位置。当点击时，记录下光标在div上的位置。mwidth和mheight表示光标落点相对于div左边和上边的距离。
接下来绘制图片：
首先定义全局变量X和Y，它们是为了实时更新图像的绘制坐标。
var ctx=document.getElementById("myCanvas").getContext("2d")var img=document.getElementById("myImg")
function drawImg(){
ctx.clearRect(0,0,1000,500)
ctx.beginPath()
ctx.drawImage(img,X,Y)
ctx.closePath()
ctx.stroke()
}
window.onload=function(){
setInterval(drawImg,1)
}
获取“画笔”，获取图片对象。这里setInterval循环执行绘制图片的函数，以刷新图片的位置，setInterval的间隔值越小，拖拽起来越“流畅”。
同时别忘了clearRect，当图片移动到下一个位置时，清除上一个位置的图片，参数为Canvas画布的坐标和尺寸。
在拖拽时将修正后的光标坐标传给X、Y：
X=moveEvent.clientX-mwidthY=moveEvent.clientY-mheight
最后加上div和图像的活动范围：
if(moveEvent.clientX<=mwidth){divObj.style.left=0+"px"
X=0
}
if(parseInt(divObj.style.left)+divObj.offsetWidth >=1000){
divObj.style.left=1000 - divObj.offsetWidth+"px"
X=1000 - divObj.offsetWidth
}
if(moveEvent.clientY<=mheight){
divObj.style.top=0+"px"
Y=0
}
if(parseInt(divObj.style.top)+divObj.offsetHeight>=500){
divObj.style.top=500-divObj.offsetHeight+"px"
Y=500-divObj.offsetHeight
}
这个就看个人的要求了，注意是要同时限定div和图片的活动范围。1000与500为本例的画布大小，如果是在整个页面里活动就换成innerWidth或innerHeight。
彻底隐藏div看看效果：
最后说下点击事件，这里要注意的是在拖拽的过程中onmousedown与onmouseup二者就构成了一个click过程，但我们不希望在拖拽结束后触发点击事件。
这里有个比较简单的办法，定义一个clickFlag默认为false,当onmousedown时设为true，若进行了onmousemove事件时设为false。
在最后onmouseup时判断clickFlag的值，为true时才触发点击事件。也就是说当你按下鼠标时，只有不发现移动，松开鼠标时才会触发点击事件。
用canvas实现，可以实现。划线的位置 你自己拦皮调调。还有对象创建canvas = $('#myCanvas')[0]
ctx = canvas.getContext('橘衡闹2d')
// 画出左边到圆罩右边的连接
linkWith: function(ctxx, leftIndex, rightIndex) {
console.log("link "+leftIndex+" with "+rightIndex)
ctxx.beginPath()
ctxx.moveTo(0.5,(2*leftIndex-1)*cellHeight + 0.5)
ctxx.lineWidth=1
ctxx.lineTo(canvasWidth +0.5,(2*rightIndex-1)*cellHeight + 0.5)
ctxx.stroke()
ctxx.closePath()
},
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）