Question

我创建了一个raphael画布。它上面有一些可拖动的圆形和矩形。问题是当我将对象拖到底部时，对象出现“半圆”或“半矩形”，并且画布不能作为拖动运动延伸。如何创建“无限”画布，允许我在更大的空间中拖动对象。

我正在考虑使用viewbox或滚动条？但似乎滚动条也有限制吗？基本上，我不知道无边框画布。有人可以帮忙吗？

Answer 1

一种解决方案是对所有对象执行检查，以查看它们是在当前画布大小之内还是之外。如果它在外面，你给画布新的宽度/高度。

这是一个工作示例（虽然不使用可拖动对象）只是为了表明这个想法：

var c = document.getElementById("canvas");
var ctx = c.getContext("2d");
    c.width = 50;
    c.height = 50;
var myObjects = new Array();

var negativeOffSetX = 0;
var negativeOffSetY = 0;

myObjects[0] = new object("rect",15,30,0,50,50);
myObjects[1] = new object("rect",45,10,0,50,75);
myObjects[2] = new object("circle",0,0,5,200,200);
myObjects[3] = new object("rect",50,20,0,-50,-80);

function object(oType,w,h,r,x,y) {
    this.oType = oType;
    this.w = w;
    this.h = h
    this.r = r;
    this.x = x;
    this.y = y;
}

function drawCircle(r,x,y) {
    ctx.beginPath();
    ctx.arc(x,y,r,0,2*Math.PI);
    ctx.stroke();
}

function drawRectangle(w,h,x,y) {
    //I want the x,y coordinates to be the center of the rect.  
    var edgeX = x-w/2;
    var edgeY = y-h/2;
    ctx.strokeRect(edgeX,edgeY,w,h);
}

function paint() {
    for (var i = 0; i<myObjects.length; i++) {
        var o = myObjects[i];
        if (o.oType == "rect") {
            drawRectangle(o.w,o.h,o.x+negativeOffSetX,o.y+negativeOffSetY);
        }
        else {
            drawCircle(o.r,o.x+negativeOffSetX,o.y+negativeOffSetY);    
        }
    }
    
    ctx.beginPath();
    ctx.arc(negativeOffSetX,negativeOffSetY,5,0,2*Math.PI);
    ctx.fillStyle="red";
    ctx.fill();
    ctx.fillStyle="black";
    ctx.fillText("(0,0)",negativeOffSetX,negativeOffSetY+15);
}


function adjustCanvasSize() {
    var maxWidth = c.width;
    var maxHeight = c.height;
    
    var minWidth = 0;
    var minHeight = 0;
    for (var i = 0; i<myObjects.length; i++) {
        var o = myObjects[i];
        if (o.oType == "rect") {
            if (o.x+o.w/2 > maxWidth) {
                maxWidth = o.x+o.w/2;
            }
            if (o.y+o.h/2 > maxHeight) {
                maxHeight = o.y+o.h/2;
            }
            
            if (o.x-o.w/2 < minWidth) {
                minWidth = o.x-o.w/2;
            }
            if (o.y-o.h/2 < minHeight) {
                minHeight = o.y-o.h/2;
            }
        }
        else {
            if (o.x+o.r > maxWidth) {
                maxWidth = o.x+o.r;
            } 
            if (o.y+o.r > maxHeight) {
                maxHeight = o.y+o.r;
            }  
            if (o.x-o.r < minWidth) {
                minWidth = o.x-o.r;
            } 
            if (o.y-o.r < minHeight) {
                minHeight = o.y-o.r;
            }
        }
    }
    negativeOffSetX = -minWidth;
    negativeOffSetY = -minHeight;
    c.width = maxWidth+negativeOffSetX;
    c.height = maxHeight+negativeOffSetY;
}
adjustCanvasSize();
paint();

canvas {
    border: 1px solid grey;
}

The original size of the canvas is 50x50. Center point (0,0) is indicated by the red dot
<canvas id="canvas"></canvas>

请参阅fiddle以了解变量。

如何创建无限的raphael画布

1 个答案: