1 Тема від Kane 2.0 Востаннє редагувалося Kane 2.0 (07.04.2018 19:43:19)

  • Kane 2.0
  • Користувач
  • Поза форумом
  • Дата реєстрації: 31.12.2015
  • Повідомлень: 38
    • Репутація: 12

Тема: Карта зображень, pyqt, svg, координати

Значить в html є такий собі атрибут "usemap", він дозволяє вказати, що певна ділянка зображення є посиланням. Задавши координати, ми можемо формувати доволі складні фігури.
Так життя склалося, що мені випало зробити подібне у pyqt. За пару годин накидав концепт, де мені підвантажувалося зображення (QPixmap), попередньо я вручну отримав бажані координати у inkscape із цього зображення, ну а там вже збочення із малюванням полігона (QPolygon) по тим координатам. Усе працює, але так як зображення растрове, то краї полігона каряві та негарні. Ніби не критично, але я запримітив, що гарніше буде у векторі, а точніше svg. Значить якось перевів картинку у svg, вивів на форму через QSvgRenderer, а далі хз.. яким способом можна імітувати роботу usemap нативно? Або може хто знає ще які-небудь методи вирішення подібної задачі?

Подякували: leofun011

2 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • На форумі
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 097
    • Репутація: 5660

Re: Карта зображень, pyqt, svg, координати

ну ви ж можете дізнатись координати миші, коли клікаєте на ту картинку? ну от переводьте їх в координати відносні для картинки, а потім вже математика... у вас є набір замкнутих об'єктів, і треба якось зрозуміти, в якому об'єкті знаходиться той піксель, по котрому ви клікнули

Подякували: Kane 2.01

3 Відповідь від leofun01 Востаннє редагувалося leofun01 (01.01.2016 15:50:52)

  • leofun01
  • leofun01
  • Replace Team
  • Поза форумом
  • Дата реєстрації: 15.03.2014
  • Повідомлень: 3 278
    • Репутація: 2720

Re: Карта зображень, pyqt, svg, координати

В html можна використати z-index і поверх svg накласти img з прозорою картинкою.
Наприклад:

<!DOCTYPE html>
<html>
<body>

<img src="http://upload.wikimedia.org/wikipedia/commons/c/c4/600_px_Transparent_flag.png"
  alt="Planets" width="300" height="300" usemap="#planetmap" style="position: absolute;">

<map name="planetmap">
  <area shape="circle" coords="108,108.5,50" alt="Cyan" href="./cyan.html">
  <area shape="circle" coords="157.3,209.5,50" alt="Yellow" href="./yellow.html">
  <area shape="circle" coords="209.2,109.5,50" alt="Magenta" href="./magenta.html">
</map>

<svg style="z-index: -1; position: absolute;" width="300" height="300">
<g fill-opacity=".5" stroke-width="4">
    <circle cx="108" cy="108.5" r="50" fill="#0ff" stroke="#0ff"/>
    <circle cx="157.3" cy="209.5" r="50" fill="#ff0" stroke="#ff0"/>
    <circle cx="209.2" cy="109.5" r="50" fill="#f0f" stroke="#f0f"/>
</g>
</svg>

</body>
</html>

зроблено на основі прикладу з w3schools

Подякували: Kane 2.01

leofun01 вебсайт

4 Відповідь від leofun01 Востаннє редагувалося leofun01 (01.01.2016 16:10:10)

  • leofun01
  • leofun01
  • Replace Team
  • Поза форумом
  • Дата реєстрації: 15.03.2014
  • Повідомлень: 3 278
    • Репутація: 2720

Re: Карта зображень, pyqt, svg, координати

А ще посилання можна прописувати прямо в середині svg.
Наприклад:

<svg style="z-index: -1; position: absolute;"
  width="300" height="300">
<g fill-opacity=".5" stroke-width="4">
  <a xlink:href="./magenta.html">
    <circle cx="108" cy="108.5" r="50" fill="#0ff" stroke="#0ff"/>
  </a>
  <a xlink:href="./cyan.html">
    <circle cx="157.3" cy="209.5" r="50" fill="#ff0" stroke="#ff0"/>
  </a>
  <a xlink:href="./yellow.html">
    <circle cx="209.2" cy="109.5" r="50" fill="#f0f" stroke="#f0f"/>
  </a>
</g>
</svg>

Детальніше тут.

Подякували: FakiNyan, Kane 2.02

leofun01 вебсайт

5 Відповідь від FakiNyan Востаннє редагувалося FakiNyan (01.01.2016 16:21:37)

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • На форумі
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 097
    • Репутація: 5660

Re: Карта зображень, pyqt, svg, координати

leofun01 написав:

А ще посилання можна прописувати прямо в середині svg.
Наприклад:

<svg style="z-index: -1; position: absolute;"
  width="300" height="300">
<g fill-opacity=".5" stroke-width="4">
  <a xlink:href="./magenta.html">
    <circle cx="108" cy="108.5" r="50" fill="#0ff" stroke="#0ff"/>
  </a>
  <a xlink:href="./cyan.html">
    <circle cx="157.3" cy="209.5" r="50" fill="#ff0" stroke="#ff0"/>
  </a>
  <a xlink:href="./yellow.html">
    <circle cx="209.2" cy="109.5" r="50" fill="#f0f" stroke="#f0f"/>
  </a>
</g>
</svg>

Детальніше тут.

за допомогою цьої фігні можна красти паролі? типу - "натисніть на цю рибинку, аби перевірити, чи вагітні ви!"
http://не-дійсний-домен/mfNAy/3b12ea1458.svg
і потім вас кидає на підроблений сайт, котрий має такий самий дизайн, і пропонує вам увійти в систему, після входу вас перекидує на сайт-оригінал, і наче все окей, ви увійшли в систему.

Подякували: leofun011

6 Відповідь від leofun01

  • leofun01
  • leofun01
  • Replace Team
  • Поза форумом
  • Дата реєстрації: 15.03.2014
  • Повідомлень: 3 278
    • Репутація: 2720

Re: Карта зображень, pyqt, svg, координати

FakiNyan написав:

за допомогою цьої фігні можна красти паролі?

незнаю ...
Якщо хтось захоче вкрасти пароль думаю він зможе це зробити і без svg.
Головне зробити підробку максимально подібною до оригіналу.

leofun01 вебсайт

7 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • На форумі
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 097
    • Репутація: 5660

Re: Карта зображень, pyqt, svg, координати

leofun01 написав:
FakiNyan написав:

за допомогою цьої фігні можна красти паролі?

незнаю ...
Якщо хтось захоче вкрасти пароль думаю він зможе це зробити і без svg.
Головне зробити підробку максимально подібною до оригіналу.

а мона якось змінити те, що ми бачимо в адресній стрічці?

8 Відповідь від leofun01

  • leofun01
  • leofun01
  • Replace Team
  • Поза форумом
  • Дата реєстрації: 15.03.2014
  • Повідомлень: 3 278
    • Репутація: 2720

Re: Карта зображень, pyqt, svg, координати

FakiNyan написав:

а мона якось змінити те, що ми бачимо в адресній стрічці?

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

Подякували: FakiNyan1

leofun01 вебсайт

9 Відповідь від VTrim Востаннє редагувалося VTrim (01.01.2016 19:02:53)

  • VTrim
  • VTrim
  • =)
  • Поза форумом
  • Дата реєстрації: 07.09.2014
  • Повідомлень: 3 319
    • Репутація: 2298

Re: Карта зображень, pyqt, svg, координати

leofun01 написав:
FakiNyan написав:

а мона якось змінити те, що ми бачимо в адресній стрічці?

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

window.history.pushState() дає змінювати адресний рядок тільки в межах домену.
Тобто якщо http://replace.org.ua/search/recent
То змінити можна тільки /search/recent.
Тип атаки,про який говорить FakiNyan називається CSRF. Організувати її можна через замасковані POST/GET запити на незахищені сайти

Подякували: 0xDADA11C7, leofun01, Kane 2.03

10 Відповідь від FakiNyan

  • FakiNyan
  • FakiNyan
  • Робітниця.
  • На форумі
  • Дата реєстрації: 27.06.2013
  • Повідомлень: 14 097
    • Репутація: 5660

Re: Карта зображень, pyqt, svg, координати

взагалі-то я казав про звичайний фішинг..

11 Відповідь від VTrim

  • VTrim
  • VTrim
  • =)
  • Поза форумом
  • Дата реєстрації: 07.09.2014
  • Повідомлень: 3 319
    • Репутація: 2298

Re: Карта зображень, pyqt, svg, координати

Це теж по суті фішинг. Тільки в вашому випадку потрібно створити фейк сторінки авторизації наприклад. Через браузер зберегти весь html включно з js/css секундна справа. А action форми направити на свій php скрипт.

12 Відповідь від Kane 2.0 Востаннє редагувалося Kane 2.0 (07.04.2018 19:43:23)

  • Kane 2.0
  • Користувач
  • Поза форумом
  • Дата реєстрації: 31.12.2015
  • Повідомлень: 38
    • Репутація: 12

Re: Карта зображень, pyqt, svg, координати

FakiNyan, це було зроблено. Брав min/max значення по x та y, потім по цим значенням формував прямокутник, та в циклі порівнював координати миші в межах цього прямокутника. Нічого кращого до розуму не прийшло.

Хіх, забув додати: цей полігон, при кожному кліку, я закрашую, і саме тому краї полігона мені здалися карявими та негарними у растрі. Свій растр я конвертнув у SVG, та при виводі на форму його штучно збільшував до потрібного мені розміру. Звісно, полігон по новим координатам буде в оригінальному розмірі, тобто мені його теж треба масштабувати, як - хз. Ну і щодо самих координат: аби краї полігона були симпатичні, то бажано використовувати координати в оригінальному кодуванні, бо воно там відповідає стандарту цього SVG, але для спрощення задавання координат через QPoint, я використав самопальну утиліту InkscapeMap, звісно воно різало цінний контент цих координат (в оригіналі, наприклад, якась точка має 14.88, а программа мені урізає його до просто 14).

Яким толерантним способом усе це зробити у pyqt?