HTML5 Canvas. Как нарисовать линию тоньше?

234

09 мая 2018, 03:44

На данный момент изучаю библиотеку Konva.js и Vue-konva. Столкнулся со следующей проблемой:

[![<template>
    <v-stage :config="elCanvasContent">
      <v-layer>
        <v-line :config="{
          points: \[10, 10, 370, 10, 370, 190, 10, 190\],
          stroke: '#5e5e5e',
          closed:'true',
        }">
        </v-line>
        <v-line :config="{
          points: \[70, 80, 70, 40\],
          stroke: '#000000',
          strokeWidth: 1,
          lineCap: 'sqare',
          lineJoin: 'round'
        }">
        </v-line>
        <v-line :config="{
          points: \[65, 70, 65, 50, 75, 50, 75, 70\],
          stroke: '#9f1d16',
          strokeWidth: 1,
          fill: 'blue',
          lineCap: 'sqare',
          lineJoin: 'round',
          closed:'true'
        }">
        </v-line>
      </v-layer>
    </v-stage>
</template>
<script>
export default {
  data() {
    return {
      elCanvasContent: {
        width: 400,
        height: 200,
      },
     }
   }
 };
</script>][1]][1]

Результат кода видно на рисунке.

Вопрос: Эти линии(на которых указано стрелками) являются толще чем 1 пиксель. (но - по документации должны быть именно 1px.)

Можно ли каким то образом сделать их тоньше? Читал что на обычном канвасе как то можно это реализовать. https://developer.mozilla.org/ru/docs/Web/API/Canvas_API/Tutorial/%D0%9F%D1%80%D0%B8%D0%BC%D0%B5%D0%BD%D0%B5%D0%BD%D0%B8%D0%B5_%D1%81%D1%82%D0%B8%D0%BB%D0%B5%D0%B9_%D0%B8_%D1%86%D0%B2%D0%B5%D1%82%D0%BE%D0%B2#A_lineWidth_example

Но как это сделать(встроить) в данной библиотеке? (если это возможно.)

Answer 1

Проблема решена.

    <template>
    <v-stage :config="elCanvasContent">
      <v-layer>
        <v-line ref='pointerForPrice' :config="{
          points: [369, 20.5, 375, 20.5],
          stroke: '#000000',
          strokeWidth: 1,
          lineCap: 'sqare',
          lineJoin: 'round'
        }">
        </v-line>
        <v-line ref='rectOfNavigationBorder' :config="{
          points: [10.5, 10.5, 370.5, 10.5, 370.5, 190.5, 10.5, 190.5],
          stroke: '#5e5e5e',
          strokeWidth: 1,
          lineCap: 'sqare',
          lineJoin: 'round',
          closed:'true',
        }">
        </v-line>
        <v-line ref='hiLowCandlestick' :config="{
          points: [70, 80, 70, 40],
          stroke: '#000000',
          strokeWidth: 1,
          lineCap: 'sqare',
          lineJoin: 'round'
        }">
        </v-line>
        <v-line ref='bodyOfCandlestick' :config="{
          points: [65, 70, 65, 50, 75, 50, 75, 70],
          stroke: '#9f1d16',
          strokeWidth: 1,
          fill: 'blue',
          lineCap: 'sqare',
          lineJoin: 'round',
          closed:'true'
        }">
        </v-line>
      </v-layer>
    </v-stage>
</template>
<script>
export default {
  data() {
    return {
      elCanvasContent: {
        width: 400,
        height: 200,
      },
     }
   }
 };
</script>

Необходимо всего лишь начинать отсчет координат не с целого числа, а с дробного. (Например не с 10 а с 10.5).

Создание интернет-магазина строительных материалов в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Графики html5 js canvas

нужна помощь, использую chartjs для построения диаграмм, все ничего, НО требуется очень большой объем данных в виде 500000 точек, с чем не справляется...

178

javascript