Jump to content
  • 0

Адаптивное изображение на canvas


litwit
 Share

Question

Задача: сделать карту изображения для масштабируемой растровой картинки.

 

Насколько я понял нужно:

1. использовать canvas

2. Загрузить в него картинку

3. Как-то пропорционально картинке масштабировать canvas под экран (использовать еще одно прозрачное изображение с пропорциями картинки? картинку делать бекграундом? Что-то с ходу ничего не получается.)

4. Нарисовать карту в прозрачных svg

5. Наложить svg поверх и задать им ссылки

 

Плотно еще не разбирался, но у меня сомнения - можно ли это вообще сделать?

 

Link to comment
Share on other sites

3 answers to this question

Recommended Posts

  • 0

Канвас? свг? А area не подходит что ли?

В этом мире все возможно сделать. Тут зависит от того, сколько вы готовы за это заплатить.


И хоть детально бы рассказали об этой карте изображений. Скриншот так.

Link to comment
Share on other sites

  • 0

Видимо, area таки не подходит, т.к. его координаты задаются в пикселах. Для новых браузеров, в принципе, можно обойтись одним SVG, примерно так. Для кроссбраузерности, наверное, проще и надежнее взять библиотечку raphael.js.

Link to comment
Share on other sites

  • 0

Видимо, area таки не подходит, т.к. его координаты задаются в пикселах. Для новых браузеров, в принципе, можно обойтись одним SVG, примерно так. Для кроссбраузерности, наверное, проще и надежнее взять библиотечку raphael.js.

 

Вот тут более развернуто описан процесс http://habrahabr.ru/post/127994/. Добавлю сюда, как сделаю, пока на флеше повесил. 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

  • Similar Content

    • By Алеся
      Подскажите, пожалуйста, как растянуть фоновую картинку, заключенную в div, на всю ширину вьюпорта? Сейчас она отображается посередине, по ширине макета. Указывала ширину 100%, 1200px, минимальную ширину 1200px - не работает.
      <div class="banner"> 
            <div class="container background-image">
            <div class="banner_text"></div>
            </div>
          </div>
      CSS:
      .background-image {
        background-image: url('/img/new_oranges.jpg');
        background-size: cover;
        height: 200px;
      }
    • By Almaz_Kazan
      Добрый день у class="fb7" не действует правило display block при уменьшении экрана на 721px
      Вот сайт http://mrdtools.com/exec/spin_template_ready/iphone_version/#
      ftp доступ:
      хост:  s5.thehost.com.ua
      логин: sabrina
      пароль: Iar862JZ
      Папка iphone_version
      Помогите пожалуйста 
    • By mejta
      Приписал  body{
      background-image: url(img/fon.png)
      }
       Сразу фон есть ,  а после обновления изчезает.
      И так с любой картинкой
      Подробней в скриншотах
       
    • By evgenia18
      Добрый день! 
      На данный момент прохожу обучение по веб-программированию, но уже сейчас хотело бы поработать с реальными проектами. 
      Знаю HTML, CSS, принципы адаптивной верстки, основы JavaScript и тд.
      Пример моей работы находится по адресу https://evgenia1991.github.io/
    • By Tempest
      Не могу понять,как убрать пробел под футером. Вроде блоки не выпирают 
       Вот исходный код http://www.cssdesk.com/J8Xk9

       
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy