Добавление обратной подсветки к плагину карты изображений jQuery? - PullRequest
Новая
       17

Добавление обратной подсветки к плагину карты изображений jQuery?

2 голосов
/ 13 ноября 2009

Я использую плагин jQuery Map Hilighter , но вместо того, чтобы затенять темное пятно над каждой областью, я хотел бы обратить это вспять и вместо этого сделать окружающую область темной, оставляя область наведения одинаковой цвет.

Я посмотрел код для плагина, и он, кажется, использует элемент canvas (и, я полагаю, эквивалент MS) для выделения. Тем не менее, Firebug не очень подходит для точного определения форм - на демонстрации выше он показывает это: 

 <canvas style="border: 0pt none ; padding: 0pt; width: 960px; height: 593px; position: absolute; left: 0pt; top: 0pt; opacity: 1;" height="593" width="960"></canvas>

И я не вижу ничего, что определяет форму элемента для наведения. Это часть JS, которая, кажется, создает форму: 

add_shape_to = function(canvas, shape, coords, options) {
    var i, context = canvas.getContext('2d');
    context.beginPath();
    if(shape == 'rect') {
        context.rect(coords[0], coords[1], coords[2] - coords[0], coords[3] - coords[1]);
    } else if(shape == 'poly') {
        context.moveTo(coords[0], coords[1]);
        for(i=2; i < coords.length; i+=2) {
            context.lineTo(coords[i], coords[i+1]);
        }
    } else if(shape == 'circ') {
        context.arc(coords[0], coords[1], coords[2], 0, Math.PI * 2, false);
    }
    context.closePath();
    if(options.fill) {
        context.fillStyle = css3color(options.fillColor, options.fillOpacity);
        context.fill();
    }
    if(options.stroke) {
        context.strokeStyle = css3color(options.strokeColor, options.strokeOpacity);
        context.lineWidth = options.strokeWidth;
        context.stroke();
    }
    if(options.fade) {
        fader(canvas, 0);
    }
};

1 Ответ

3 голосов
/ 16 ноября 2009

Формы элементов определены как элементы <area> внутри элемента <map> в коде HTML.

Простой ответ на ваш вопрос - добавить что-то вроде этого 

  if (options.inverseFill) {
    context.rect(0,0, canvas.width,canvas.height);
  }

после строки context.beginPath();, затем параметр по умолчанию: inverseFill: true,, а затем убедитесь, что все области на карте изображения объявлены в одном и том же направлении по часовой стрелке.

Что происходит, так это то, что вы определяете дополнительный подпуть для пути, который определяет темное пятно, и при заполнении перекрывающаяся область (т. Е. Исходное пятно) будет отменяться до тех пор, пока не будут отменены числа обмоток подпути , в результате чего вы получаете желаемое перевернутое поведение.

Все становится намного сложнее, если определения полигонов вашей области могут вращаться в обоих направлениях. Например, если вы сделаете вышеупомянутое для исходной демонстрации MapHilight карты США, только некоторые из состояний будут вести себя правильно, так как их формы определены в правильном направлении по часовой стрелке - остальные остаются темными, поскольку их номера обмоток являются неправильным знаком ,

Если у вас есть полный контроль над определением карты изображения, я бы посоветовал оставить все как есть и просто убедиться, что все области движутся в одном направлении (т. Е. Просто изменить список координат для каждой области, которая не работает).

Если нет, то во время инициализации вам нужно будет предварительно рассчитать для каждой фигуры число обмоток. Скорее всего, это будет связано с просмотром списка точек и суммированием угла между каждыми двумя последовательными сегментами, рассчитанного с использованием atan2. Затем в функции add_shape_to обведите 4 угла холста в правильном направлении.

В любом случае, я надеюсь, что это поможет

Обновление:

извините, я не видел ваш комментарий ранее. для круглой области в функции add_shape_to замените } else if(shape == 'circ') { часть с 

  } else if(shape == 'circ') {
    context.closePath();
    context.moveTo(coords[0] + coords[2], coords[1]);
    context.arc(coords[0], coords[1], coords[2], 0, Math.PI * 2, true);
    context.closePath(); 
  }

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

...