如何创造无限拉斐尔 canvas

Question

我创造了一个拉斐尔 canvas。上面有一些可拖动的圆形和矩形。一个问题是当我将对象拖到底部时，对象出现 "half circle" 或 "half rectangle" 并且 canvas 无法随着拖动移动而扩展。如何创建 "infinite" canvas 允许我将对象拖动到更大的 space.

我正在考虑使用视图框或滚动条？但是好像滚动条也有限制吧？基本上，我对无边框canvas一窍不通。任何人都可以帮忙吗？

Answer 1

一种解决方案是检查所有对象，看看它们是在当前 canvas 大小的内部还是外部。如果在外面，你给 canvas new width/height.

这里有一个工作示例（虽然没有使用可拖动对象）只是为了展示这个想法：

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 以尝试使用变量。

如何创造无限拉斐尔 canvas

How to create infinite raphael canvas

javascript

canvas

raphael