Question

正在开发一个计算一张纸上的碎片数量的项目。我想使用HTML Canvas显示结果。

到目前为止，我可以通过画布尺寸设置纸张尺寸，也可以通过矩形设置尺寸。这些是从文本框＃a0，＃a1，＃c＆amp; #D。

我在画布内绘制矩形的结果之后。以下是我到目前为止的代码但是没有工作......

function drawShapes(){
 var canvas = document.getElementById('mycanvas');
 canvas.width = (document.piecesForm.a0.value) /3;
 canvas.height = (document.piecesForm.a1.value) /3;

 var pieceWidth = (document.getElementById('c').value) / 3;
 var pieceHeight = (document.getElementById('d').value) / 3;

 var numAcross = canvas.width / pieceWidth;
 var numDown = canvas.height / pieceHeight;

 // Make sure we don't execute when canvas isn't supported
 if (canvas.getContext){

  // use getContext to use the canvas for drawing
 var ctx = canvas.getContext('2d');

for(i = 0; i < numAcross; i++){
  ctx.lineWidth = 1;
  ctx.beginPath();
  ctx.strokeRect(0,0,pieceWidth,pieceHeight);
  ctx.moveTo(i*pieceWidth,0);
}
} 
}

这将需要另一个循环来显示件数，任何帮助都会很棒

Answer 1

请

var total=0 as Global variable

代码是

    for (i = 0; i < numAcross; i++) {
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.strokeRect(i*pieceWidth, 0, pieceWidth, pieceHeight);
        ctx.moveTo(i * pieceWidth, 5);
    }
    for (i = 0; i < total-numAcross; i++) {
        ctx.lineWidth = 1;
        ctx.beginPath();
        ctx.strokeRect(i*pieceWidth, pieceHeight, pieceWidth, pieceHeight);
        ctx.moveTo(i * pieceWidth, 5);
    }

小提琴：

Fiddle

Answer 2

我更新了您的代码，现在可以使用了：

http://jsfiddle.net/gamealchemist/2cKm3/5/

var sheetSetup = {
    layout: {
        flipped: false,
        piecePerRow: 0,
        piecePerLine: 0
    },
    sheet: {
        sizeX: 0,
        sizeY: 0
    },
    piece: {
        sizeX: 0,
        sizeY: 0
    }
};


function getSheetSizeX() {
    return parseInt(document.piecesForm.a0.value);
}

function getSheetSizeY() {
    return parseInt(document.piecesForm.a1.value);
}

function getfinalSizeX() {
    return parseInt(document.piecesForm.c.value);
}

function getfinalSizeY() {
    return parseInt(document.piecesForm.d.value);
}

function postMessage(dst, msg) {
    document.getElementById(dst).innerHTML = msg;
}

function piecesCalc() {

    var error = false;

    // If the value of the sheet size textboxes is empty, then show an alert
    if (!getSheetSizeX() || !getSheetSizeY()) {
        postMessage("message1", "Sheet Size can't be empty!");
        document.piecesForm.a0.focus();
        error = true;
    } else {
        postMessage("message1", "");
    }

    // If the value of the final size textboxes is empty, then show an alert
    if (!getfinalSizeX() || !getfinalSizeY()) {
        postMessage("message2", "Final Size can't be empty!");
        document.piecesForm.c.focus();
        error = true;
    } else {
        postMessage("message2", "");
    }

    if (error) {
        postMessage("answer", "---");
        return;
    }

    var total1 = Math.floor(getSheetSizeX() / getfinalSizeX()) * Math.floor(getSheetSizeY() / getfinalSizeY());

    var total2 = Math.floor(getSheetSizeY() / getfinalSizeX()) * Math.floor(getSheetSizeX() / getfinalSizeY());

    if (total2 <= total1) {
        sheetSetup.layout.flipped = false;
        sheetSetup.layout.piecePerRow = Math.floor(getSheetSizeX() / getfinalSizeX());
        sheetSetup.layout.piecePerLine = Math.floor(getSheetSizeY() / getfinalSizeY());
    } else {
        sheetSetup.layout.flipped = true;
        sheetSetup.layout.piecePerRow = Math.floor(getSheetSizeY() / getfinalSizeX());
        sheetSetup.layout.piecePerLine = Math.floor(getSheetSizeX() / getfinalSizeY());
    }
    sheetSetup.sheet.sizeX = getSheetSizeX();
    sheetSetup.sheet.sizeY = getSheetSizeY();
    sheetSetup.piece.sizeX = getfinalSizeX();
    sheetSetup.piece.sizeY = getfinalSizeY();

    var total = Math.max(total1, total2);
    postMessage("answer", total + " per sheet");
    //    document.piecesForm.nbpieces.value = total;
}

function drawShapes() {
    console.log(sheetSetup);

    var displayRatio = 5;
    // get the canvas element using the DOM
    var canvas = document.getElementById('mycanvas');
    canvas.width = Math.floor( sheetSetup.sheet.sizeX / displayRatio );
    canvas.height = Math.floor( sheetSetup.sheet.sizeY / displayRatio );

    // Make sure we don't execute when canvas isn't supported
    if (canvas.getContext) {

        // use getContext to use the canvas for drawing
        var ctx = canvas.getContext('2d');

        var usedWidth = sheetSetup.layout.flipped ? sheetSetup.piece.sizeY : sheetSetup.piece.sizeX;
        var usedHeight = sheetSetup.layout.flipped ? sheetSetup.piece.sizeX : sheetSetup.piece.sizeY;

        usedWidth /= displayRatio;
        usedHeight /= displayRatio;

        for (var line = 0; line < sheetSetup.layout.piecePerLine; line++) {
            for (var row = 0; row < sheetSetup.layout.piecePerRow; row++) {
                ctx.strokeRect(row * usedWidth, line * usedHeight, usedWidth, usedHeight);
            }
        }
    }
}

HTML Canvas - 在循环中绘制多个矩形

2 个答案: