Unable to fix the center align image issue in Histogram View

Mar 7, 2013 at 6:22 AM
Hi Roger ,

You have done a excellent job in Pivot viewer.

I'm currently working on share point 2013.I have already built pivot viewer using your source code and its working fine.
In grid view ,images are loading perfectly, but there is a small correction in the graph view, images are not aligned in center. I referred to your previous post but i am not able to find out where to do the corrections. I have posted my draw method code below.

please tell me where should i do the changes to bring images in center align.

//This is the draw method for your reference

Draw: function ()
{
    if (this.destinationVisible) {

        //Determine level
        var biggest = this.width > this.height ? this.width : this.height;
        var thisLevel = Math.ceil(Math.log(biggest) / Math.log(2));

        if (thisLevel == Infinity || thisLevel == -Infinity)
            thisLevel = 0;

        //TODO: Look at caching last image to avoid using _controller
        //if (thisLevel != _level || _images == null) {
        this._level = thisLevel;
        this._images = this._controller.GetImagesAtLevel(this.facetItem.Img, this._level);
        //}
    }

    if (this.ImageSource != "") {
        var img = new Image();
        img.src = this.ImageSource;
        //img.align = this.Center;
        //var test = ((this.width-img.width) / 2);
        //img.offsetLeft = test;
        //img.offsetTop = test;
        //img.align = center;
        //this.context.clearRect(0, 0, this.width, this.height)
        this.context.drawImage(img, this.x + 2, this.y + 2, this.width, this.height);
        //this.context.drawImage(img, this.x + 2, 200)
    }
    else {
        this.DrawEmpty();
    }

    if (this._selected) {
        //draw a blue border
        this.context.beginPath();
        this.context.rect(this.x + 2, this.y + 2, this.width, this.height);
        this.context.lineWidth = 3;
        this.context.strokeStyle = "#92C4E1";
        this.context.stroke();
    }
},
//http://simonsarris.com/blog/510-making-html5-canvas-useful
Contains: function (mx, my)
{
    return (this.x <= mx) && (this.x + this.width >= mx) && (this.y <= my) && (this.y + this.height >= my);
},
DrawEmpty: function () {
    if (this._controller.DrawLevel == undefined) {
        //draw an empty square
        this.context.beginPath();
        this.context.fillStyle = "#FFFFFF";
        this.context.fillRect(this.x + 2, this.y + 2, this.width - 4, this.height - 4);
        this.context.rect(this.x + 2, this.y + 2, this.width - 4, this.height - 4);
        this.context.lineWidth = 1;
        this.context.strokeStyle = "#FFFFFF";
    }
    else {

        //use the controllers blank tile
        this._controller.DrawLevel(this.facetItem, this.context, this.x + 2, this.y + 2, this.width - 4, this.height - 4);
    }
},
CollectionRoot: "",
now: null,
end: null,
x: 0,
y: 0,
startx: 0,
starty: 0,
destinationx: 0,
destinationy: 0,
width: 0,
height: 0,
startwidth: 0,
startheight: 0,
destinationwidth: 0,
destinationheight: 0,
destinationVisible: true,
context: null,
facetItem: null,
Selected: function (selected) { this._selected = selected },
ImageSource: ""
});
Coordinator
Mar 7, 2013 at 9:10 AM
Hi,
You need to update the drawImage method with the new offsets: this.context.drawImage();
The context object is an instance of the canvas 2d context. See http://www.w3schools.com/tags/canvas_drawimage.asp for more details on the drawImage method.

Thanks