CODEWITHSUNDEEP
javascriptprintingbackground-color
JoMojo
JoMojo

Reputation: 404

anyone familiar with wz_jsgraphics and setPrintable option?

I'm using said plugin to create an output of squares which works as expected but I can't print the output because they're background colors... so I tried setting setPrintable(true) which does in fact enable printing but messes up the output... anyone have any idea why or an alternative way of accomplishing my task?

link to plugin... wz_jsgraphics

here's the js script I'm using to create the squares...

function drawSheet(sheets){
var sheetsLayout=JSON.parse(sheets);
var sheetNum=1,
    partNum=1,
    xOffset=30,
    yOffset=20,
    nextSheetSpacing=0,
    modelName=sheetsLayout[0];

$.each(sheetsLayout[1], function(index, sheetData){
    $('<div></div>', {id:"sheet"+sheetNum}).appendTo('body');
    var sheetLayout=new jsGraphics("sheet"+sheetNum);

    sheetWidth=sheetData[0]
    sheetLength=sheetData[1]
    sheetWidthPx=sheetData[2]
    sheetLengthPx=sheetData[3]
    sheetThickness=sheetData[4]
    sheetMaterial=sheetData[5]
    numberOfPartsInSheet=sheetData.length-6

    sheetLayout.drawString("Sheet "+sheetNum+" -> "+sheetWidth+"\""+" x "+" "+sheetLength+"\""+" x "+sheetThickness+"\"", xOffset, 0+nextSheetSpacing);
    sheetLayout.drawString("Material: "+sheetMaterial, xOffset+250, 0+nextSheetSpacing);
    sheetLayout.drawString("Number of parts: "+numberOfPartsInSheet, xOffset+450, 0+nextSheetSpacing);
    sheetLayout.setStroke(2); 
    sheetLayout.setColor("#ffffcc");
    sheetLayout.fillRect(xOffset, yOffset+nextSheetSpacing, sheetLengthPx, sheetWidthPx);
    sheetLayout.setColor("#000000");
    sheetLayout.drawRect(xOffset, yOffset+nextSheetSpacing, sheetLengthPx, sheetWidthPx);

    for (var i=1; i<=numberOfPartsInSheet; i++){
        partName=sheetData[5+i][0]
        partWidth=sheetData[5+i][1]
        partLength=sheetData[5+i][2]
        partLocationY=sheetData[5+i][4]
        partLocationX=sheetData[5+i][3]
        partWidthPx=sheetData[5+i][5]
        partLengthPx=sheetData[5+i][6]
        partLocationYPx=sheetData[5+i][8]
        partLocationXPx=sheetData[5+i][7]

        sheetLayout.setColor('#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6));

        sheetLayout.drawString(partName, xOffset+partLocationXPx+5, nextSheetSpacing+partLocationYPx+20);
        sheetLayout.drawRect(xOffset+partLocationXPx, nextSheetSpacing+yOffset+partLocationYPx, partLengthPx, partWidthPx);

        //sheetLayout.drawString(partName, xOffset+(partLocationYPx+4), 0+nextSheetSpacing+partLocationXPx+22);
        //sheetLayout.drawRect(xOffset+partLocationXPx, yOffset+nextSheetSpacing+partLocationYPx, partWidthPx, partLengthPx);
    };

    sheetLayout.setPrintable(true);
    sheetLayout.paint();
    nextSheetSpacing=(sheetWidthPx+60)*sheetNum
    sheetNum++
});
};

Upvotes: 0

Views: 173

Answers (1)

JoMojo
JoMojo

Reputation: 404

As per Teemu's suggestion I checked out canvas and it was actually pretty easy to convert my code from wz_jsgraphics to canvas...

Credit for this answer goes to Teemu.

Here's the revised code...

function drawCanvasSheet(sheets){
var sheetsLayout=JSON.parse(sheets);
var sheetNum=1,
    partNum=1,
    xOffset=10,
    yOffset=20,
    nextSheetSpacing=0,
    modelName=sheetsLayout[0];

var canvas=document.createElement('canvas');
    canvas.id="cutSheet";
    canvas.width=874;
    canvas.height=450*sheetsLayout[1].length;

$.each(sheetsLayout[1], function(index, sheetData){
    var body=document.getElementsByTagName("body")[0];
        body.appendChild(canvas);        

    canvas=document.getElementById('cutSheet');

    var sheetLayout=canvas.getContext('2d');      

    if (canvas.getContext){
        var sheetWidth=sheetData[0],
            sheetLength=sheetData[1],
            sheetWidthPx=sheetData[2],
            sheetLengthPx=sheetData[3],
            sheetThickness=sheetData[4],
            sheetMaterial=sheetData[5],
            numberOfPartsInSheet=sheetData.length-6;

        sheetLayout.font="12px arial";
        sheetLayout.fillText("Sheet "+sheetNum+" -> "+sheetWidth+"\""+" x "+" "+sheetLength+"\""+" x "+sheetThickness+"\"", xOffset, 12+nextSheetSpacing);
        sheetLayout.fillText("Material: "+sheetMaterial, xOffset+250, 12+nextSheetSpacing);
        sheetLayout.fillText("Number of parts: "+numberOfPartsInSheet, xOffset+450, 12+nextSheetSpacing);

        sheetLayout.fillStyle="#ffffcc";
        sheetLayout.fillRect(xOffset, yOffset+nextSheetSpacing, sheetLengthPx, sheetWidthPx);
        sheetLayout.fillStyle="#000000";
        sheetLayout.strokeRect(xOffset, yOffset+nextSheetSpacing, sheetLengthPx, sheetWidthPx);

        for (var i=1; i<=numberOfPartsInSheet; i++){
            partName=sheetData[5+i][0];
            partWidth=sheetData[5+i][1];
            partLength=sheetData[5+i][2];
            partLocationY=sheetData[5+i][4];
            partLocationX=sheetData[5+i][3];
            partWidthPx=sheetData[5+i][5];
            partLengthPx=sheetData[5+i][6];
            partLocationYPx=sheetData[5+i][8];
            partLocationXPx=sheetData[5+i][7];

            //sheetLayout.fillStyle='#'+(0x1000000+(Math.random())*0xffffff).toString(16).substr(1,6);

            sheetLayout.fillText(partName, xOffset+partLocationXPx+5, nextSheetSpacing+partLocationYPx+32);
            sheetLayout.strokeRect(xOffset+partLocationXPx, nextSheetSpacing+yOffset+partLocationYPx, partLengthPx, partWidthPx);

        //sheetLayout.drawString(partName, xOffset+(partLocationYPx+4), 0+nextSheetSpacing+partLocationXPx+22);
        //sheetLayout.drawRect(xOffset+partLocationXPx, yOffset+nextSheetSpacing+partLocationYPx, partWidthPx, partLengthPx);
        };

        nextSheetSpacing=(sheetWidthPx+60)*sheetNum
        sheetNum++
    };
});
numberOfSheets=sheetNum-1
$("<footer><p>Number of sheets="+numberOfSheets+"</p></footer>", {id:"footer"}).appendTo('body');
};

Upvotes: 1

Related Questions