javascript - 有人熟悉 wz_jsgraphics 和 setPrintable 选项吗？

Question

我正在使用所述插件创建一个正方形输出，该输出按预期工作，但我无法打印输出，因为它们是背景颜色...所以我尝试设置 setPrintable(true) ，它实际上启用了打印但搞乱了输出......有人知道为什么或者完成我的任务的替代方法吗？

插件链接... wz_jsgraphics

这是我用来创建正方形的 js 脚本...

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++
});
};

Answer 1

根据 Teemu 的建议，我检查了 canvas，实际上将我的代码从 wz_jsgraphics 转换为 canvas 非常容易......

此答案归功于 Teemu。

这是修改后的代码...

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');
};