Canvas плохо работает с бутстрапом

Привет, у меня проблема с тегом Canvas. Я использую bootstrap, и я хочу создать холст с изображением, где я могу рисовать точки после щелчка мышью, но поскольку я использую bootstrap, область холста растягивается, а точки находятся не в том же месте, где я щелкнул с помощью мышь

$().ready(function() {
  showImage();

  $("#image").click(function(e) {
    getMousePositionAtClick(e);
  });


  function showImage() {
    var canvas = document.getElementById('image');
    var ctx = canvas.getContext('2d');

    var img = new Image();
    img.src = 'images/Piantina.jpg';
    img.onload = function() {

      ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
    };
  }

  function getMousePositionAtClick(e) {
    var rect = image.getBoundingClientRect();
    var x = e.clientX - rect.left;
    var y = e.clientY - rect.top;

    alert(rect.left);
    alert(rect.top);
    drawPoint(x, y);
  }

  function drawPoint(x, y) {
    var ctx = document.getElementById("image").getContext("2d");
    ctx.fillStyle = "#000";
    ctx.beginPath();
    ctx.arc(x, y, 3, 0, Math.PI * 2, true);
    ctx.fill();
  }
});

<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel = "stylesheet"/>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "col-lg-8" id = "columnCanvas">
  <div class = "card card-body">
    <canvas id = "image"></canvas>
  </div>
</div>

Проблема в том, что Bootstrap разработан так, чтобы быть отзывчивым, поэтому все макеты имеют размер блока, проблема в том, что элемент Canvas не является элементом управления с динамическим размером, но если мы определим размер, мы можем сделать что-то вроде -> <canvas style = "width:200px;height:200px" width = "200" height = "200" id = "image"> Это заставит холст быть 200 пикселей / 200px, а затем также делает элемент холста 200px / 200px, останавливая любое масштабирование.

— 16.07.2018 15:30

@Keith нам не нужно использовать ширину / высоту стиля CSS.

— 16.07.2018 15:37

javascript html canvas draw

16.07.2018 15:01

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 137

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Как упоминалось в комментариях выше, элемент Canvas не реагирует. Bootstrap, с другой стороны, должен быть отзывчивым. Итак, чтобы остановить масштабирование, мы можем установить размер. Глядя на спецификацию для Canvas, размер по умолчанию, если он не указан, составляет 300 пикселей / 150 пикселей. Теоретически, если мы просто установим размер Canvas CSS на 300 пикселей / 150 пикселей, это также предотвратит масштабирование, пример ниже.

$().ready(function() {
  showImage();

  $("#image").click(function(e) {
    getMousePositionAtClick(e);
  });


  function showImage() {
    var canvas = document.getElementById('image');
    var ctx = canvas.getContext('2d');

    var img = new Image();
    img.src = 'images/Piantina.jpg';
    img.onload = function() {

      ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
    };
  }

  function getMousePositionAtClick(e) {
    var rect = image.getBoundingClientRect();
    var x = e.clientX - rect.left;
    var y = e.clientY - rect.top;

    alert(rect.left);
    alert(rect.top);
    drawPoint(x, y);
  }

  function drawPoint(x, y) {
    var ctx = document.getElementById("image").getContext("2d");
    ctx.fillStyle = "#000";
    ctx.beginPath();
    ctx.arc(x, y, 3, 0, Math.PI * 2, true);
    ctx.fill();
  }
});

<link href = "https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel = "stylesheet"/>
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class = "col-lg-8" id = "columnCanvas">
  <div class = "card card-body">
    <canvas id = "image" style = "width:300px;height:150px"></canvas>
  </div>
</div>

16.07.2018 15:39

Другие вопросы по теме

Изменение фонового изображения только для части стола

Php mailform с проверкой JAvascript

Загрузочный медиа-запрос

MYSQL Только числа могут быть вставлены в таблицу

Определите два атрибута в кнопке html и перейдите к jquery

Зеркальное видео HTML 5

Только последний селектор CSS :: after работает с jQuery .addClass

CSS-анимация при наведении курсора CSS drop-shadow не работает в SVG

Как использовать RDFa с тегом Google и HTML head <base>

Как получить аутентификацию в api

Canvas плохо работает с бутстрапом

Ответы 1

Другие вопросы по теме

Похожие вопросы