Хобрук: Ваш путь к мастерству в программировании

Цвет обводки формы Konvajs сохраняется после изменения

Я пытаюсь изменить цвет обводки шестиугольника при наведении указателя мыши, а затем вернуться к исходному цвету при наведении указателя мыши.

Моя проблема в том, что если я перерисовываю только шестиугольник после обновления цвета обводки, предыдущий цвет остается по краям обводки.

hexagon.on('mouseover', function(e) {
  e.target.stroke('red');
  e.target.draw();
});

hexagon.on('mouseout', function(e) {
  e.target.stroke('gray');
  e.target.draw();
});

Демо на https://codepen.io/jsgarvin/pen/dmRJXj

Здесь исходный цвет серый, и он меняется на красный при наведении указателя мыши, но при наведении указателя мыши он снова становится серым с красной пылью по всем краям.

Если я перерисовываю весь слой, кажется, что он делает то, что я ожидал, но в моем конкретном случае использования я ожидаю, что на слое будет, среди прочего, несколько тысяч шестиугольников, и это кажется неэффективным для перерисовки всего слоя, если я просто нужно обновить один шестиугольник. Есть ли более правильный способ сделать это, на что я не обращаю внимания? Спасибо!

konvajs
23.03.2018

Ответы:


1

Вам нужно нарисовать слой.

hexagon.on('mouseover', function(e) {
  e.target.stroke('red');
  e.target.draw();
  layer.draw();  // <<<<< THIS LINE IS THE FIX
  });

Я обнаружил это, когда кодировал альтернативу, которую я включил в фрагмент ниже. Он использует вторую форму, и мы показываем и скрываем две, чтобы обеспечить эффект наведения курсора мыши. Я могу представить, что это не будет жизнеспособным во всех случаях, но может кому-то помочь, так что вот рабочий фрагмент.

Левая рука - это ваш пример, скопированный с вашего пера с включенным исправлением, правая - переключатель формы, просто для удовольствия.

var stage = new Konva.Stage({
  container: 'container',
  width: 400,
  height: 150
});

var layer = new Konva.Layer();
stage.add(layer);

  var c = layer.getCanvas();
  var ctx = c.getContext();

var hexagon = new Konva.RegularPolygon({
  x: 75,
  y: 75,
  radius: 55,
  sides: 6,
  stroke: 'gray',
  strokeWidth: 10
});
hexagon.on('mouseover', function(e) {
  e.target.stroke('red');
  e.target.draw();
  layer.draw();  // <<<<< THIS LINE IS THE FIX
  });
hexagon.on('mouseout', function(e) {
  e.target.stroke('gray');
  e.target.draw();
  layer.draw();  // <<<<< THIS LINE IS THE FIX
});


var hexagon2 = new Konva.RegularPolygon({
  x: 250,
  y: 75,
  radius: 55,
  sides: 6,
  stroke: 'gray',
  strokeWidth: 10
});
hexagon2.on('mouseover', function(e) {
  e.target.visible(false);
  hexagon3.visible(true);
  layer.draw();
});

var hexagon3 = new Konva.RegularPolygon({
  x: 250,
  y: 75,
  radius: 55,
  sides: 6,
  stroke: 'red',
  strokeWidth: 10,
  visible: false
});

hexagon3.on('mouseout', function(e) {
  e.target.visible(false);
  hexagon2.visible(true);
  layer.draw();
});
layer.add(hexagon);
layer.add(hexagon2);
layer.add(hexagon3);
stage.draw();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script src="https://cdn.rawgit.com/konvajs/konva/1.6.5/konva.min.js"></script>

<p>Left image is OP's version, right is shape-switching. Mouse-over the hexagons.</p>

<div id='container'></div>

23.03.2018
  • Да, как я сказал в своем вопросе, рисование всего слоя, похоже, работает, но это кажется крайне неэффективным. Я надеялся, что есть более подходящая передовая практика. 23.03.2018
    • Новые материалы
    Управление DOM для чайников вроде меня
    Одной из первых вещей, которую мы рассмотрели, когда начали изучать Javascript во Flatiron, была модель DOM. Кто он? Чем он занимается? Он больше машина, чем человек? Ну да довольно много. ДОМ..
    Что такое структура данных?
    Структура данных хранит и извлекает данные. Все, что обеспечивает эти две функции, является структурой данных . Период. Вы можете пропустить оставшуюся часть статьи, если ответ..
    мои январские чтения по программированию
    Эрик Эллиот Программирование приложения JavaScript Эл Свейгарт «Автоматизируйте скучные вещи с помощью Python» Прогрессивное веб-приложение Google..
    Создание ассоциаций секвелизации с помощью инструмента командной строки Sequelize
    Sequelize - популярный, простой в использовании инструмент объектно-реляционного сопоставления (ORM) JavaScript, который работает с базами данных SQL. Довольно просто начать новый проект с..
    Искусственный интеллект в юридической отрасли - пример прогнозирования судебных решений с помощью глубокого обучения
    На протяжении всей истории люди полагались на суды, присяжных, королей и королев в отправлении правосудия. Сегодня способность судов обеспечивать справедливое и быстрое правосудие для своих..
    Введение в машинное обучение для обнаружения аномалий (часть 1)
    Тщательно созданный, тщательно спроектированный ресурс для специалистов по данным. Часть 1 Главы 03 из Руководства по машинному обучению для обнаружения аномалий Внимание! Прежде чем вы..
    Начало работы с Pulumi в Digital Ocean
    Цифровой океан (ДО) — отличная альтернатива многим другим поставщикам облачных услуг. DO предоставляет простой и понятный пользовательский интерфейс, упрощающий управление инфраструктурой и..