绘制HTML5画布的特定区域

如果我的很多绘图将位于较大画布的特定区域内（在本例中为中心），有没有办法只是说您正在工作在那个特定的“子画布”中，而不是每次你想画画都必须增加/减少边距？每次指定坐标时，它都会让我的代码看起来更加复杂。绘制HTML5画布的特定区域

2013-03-31 user1136342

愿你可能想使用['画布＃translate'（https://developer.mozilla.org/en-US/docs/HTML/Canvas/Tutorial/Transformations＃翻译）或许？ – Alexander

亚历克斯说什么和亚历山大试图说什么 - 使用context.translate（x，y）将您的新图纸设置为“sub-canvas”坐标。请注意，在context.translate（100,100）之后，使用context.rect（0,0,50,50）绘制的矩形实际将在画布上绘制100,100 - 非常简单！ – markE

@markE我依靠画布宽度和高度来知道在哪里绘制，所以如果我使用translate，我仍然需要添加/减去边距以获得“sub-canvas”的宽度和高度，以便获得我的绘图坐标。 – user1136342

您可以使用drawimage将一个离屏画布绘制到另一个画布的某个部分。

创建一个新的画布对象，并绘制所有的东西。最后在某些坐标处将画布绘制到屏幕画布上，并绘制drawimage。

来源

2013-03-31 23:29:56 headchant

您可以使用translate()更改坐标原点。使用save()保存原始原点。然后，找到适合屏幕绘图区域中心的原点，并致电translate(x, y)。做你的绘画，然后用restore()让你以前的原点回来。

jsFiddle。

来源

2013-03-31 23:35:48 alex

Kinetic.js，Canvas的流行库允许您创建Group图层。你可以指定x,y坐标，这个Group的高度和宽度。您还可以在该组中添加形状并绘制其他内容。

这里的和例如：

var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 578, 
    height: 200 
    }); 
    var shapesLayer = new Kinetic.Layer(); 

    /* 
    * create a group which will be used to combine 
    * multiple simple shapes. Transforming the group will 
    * transform all of the simple shapes together as 
    * one unit 
    */ 
    var group = new Kinetic.Group({ 
    x: 220, 
    y: 40, 
    rotationDeg: 20 
    }); 

    var colors = ['red', 'orange', 'yellow']; 

    for(var n = 0; n < 3; n++) { 
    // anonymous function to induce scope 
    (function() { 
     var i = n; 
     var box = new Kinetic.Rect({ 
     x: i * 30, 
     y: i * 18, 
     width: 100, 
     height: 50, 
     name: colors[i], 
     fill: colors[i], 
     stroke: 'black', 
     strokeWidth: 4 
     }); 

     group.add(box); 
    })(); 
    } 

    shapesLayer.add(group); 
    stage.add(shapesLayer);

Here's a tutorial on how to add Groups

来源

2013-03-31 23:35:50

绘制HTML5画布的特定区域

回答

相关问题