Resizing Objects

[meetpaddy22]

How we can re-size the different object?

[caleb531]

Could you be more descriptive? What do you mean by "the different object"?

-Caleb

[meetpaddy22]

I mean to say different drawing objects. Lets say i used drawRect() to draw a rectangle now i want to re-size the same rectangle by holding an edge or from the corner for the rectangle. How can i do that? Also, how can i show a particular layer as a selected layer. I used click function and tried layer.selected = true; but it doesn't seems to be working.

Greetings Pradeep

[caleb531]

Well, because there are many ways you can implement a system for resizing shapes with the mouse, jCanvas doesn't have a specific property/method for doing so.

As for highlighting the selected layer, there is no built-in property or method for doing so. However, such behavior can be easily implemented with the current API:

var selected;

$("canvas")
// Define properties for all rectangles
.jCanvas({
  type: 'rectangle',
  width: 100, height: 100,
  click: function(layer) {
    if (selected !== undefined) {
      // Reset current selection
      $(this).setLayer(selected, {
        strokeWidth: 0
      });
    }
    // Select the clicked layer
    selected = layer;
    selected.strokeStyle = '#000';
    selected.strokeWidth = 4;
    // Update canvas
    $(this).drawLayers();
  }
})
.addLayer({
  name: "redBox",
  fillStyle: "#c33",
  x: 180, y: 150,
})
.addLayer({
  name: "greenBox",
  fillStyle: "#585",
  x: 150, y: 200,
})
.addLayer({
  name: "blueBox",
  fillStyle: "#36b",
  x: 230, y: 180,
})
.drawLayers();

-Caleb