Предотвратить границу обводки от пути переполнения - PullRequest
Новая
       49

Предотвратить границу обводки от пути переполнения

2 голосов
/ 06 февраля 2011

strokeRect (0, 0, canvasWidth, canvasHeight); рисует полный прямоугольник, но ширина линии уменьшается вдвое, вот пример: 

<canvas></canvas>

<script>
    var canvas = document.getElementsByTagName ("canvas");

    var lineWidth = 10;

    var canvasHeight = canvas[0].height;
    var canvasWidth = canvas[0].width;

    var ctx = canvas[0].getContext ("2d");

    ctx.lineWidth = lineWidth;

    ctx.strokeRect (0, 0, canvasWidth, canvasHeight);
</script>

screenshot of problem

Я могу это исправить, но не элегантно: 

<canvas></canvas>

<script>
    var canvas = document.getElementsByTagName ("canvas");

    var lineWidth = 10;

    var canvasHeight = canvas[0].height - lineWidth;
    var canvasWidth = canvas[0].width - lineWidth;

    var ctx = canvas[0].getContext ("2d");

    ctx.lineWidth = lineWidth;

    lineWidth /= 2;

    ctx.strokeRect (lineWidth, lineWidth, canvasWidth, canvasHeight);
</script>

screenshot of inelegant solution

Есть ли нативный способ сделать это? Что-то вроде атрибута css3 "box-sizing": 

canvas {
    box-sizing: border-box;
}

Спасибо.

1 Ответ

3 голосов
/ 06 февраля 2011

Штрихи в HTML5 Canvas - как в Adobe Illustrator или SVG - всегда сосредоточены на пути, которым они обводятся.Давным-давно я предложил новое свойство SVG , которое звучит так, как вы хотите, но эта функциональность отсутствует ни в SVG, ни в Canvas. Ваш ход ведет себя так, как и предполагалось.

Однако, вы можете обойти это , используя область отсечения , обрезая до того жекак путь, который вы собираетесь обвести, и удвоив свою номинальную линиюWidth: 

function clippedRectStroke( ctx, x, y, w, h ){
  ctx.save();
  ctx.beginPath();
  ctx.moveTo(x,y);
  ctx.lineTo(x,y+h);
  ctx.lineTo(x+w,y+h);
  ctx.lineTo(x+w,y);
  ctx.clip();
  ctx.lineWidth *= 2;
  ctx.strokeRect(x,y,w,h);
  ctx.restore(); 
};

Рабочая демонстрация здесь: http://jsfiddle.net/Dvz9Y/2/

...