Первый взгляд на серию «Последний выпуск» — автоматическое тестирование Python+Playwright-63 — позиционирование элементов Canvas и SVG.
1. Введение
То, чем поделился сегодня брат Хун, редко встречается в реальной работе по тестированию и является относительно редким. Если мы столкнемся с этим внезапно, мы можем запутаться и смутиться, и какое-то время мы не будем знать, что делать. Итак, брат Хун предлагает здесь идею, которую каждый может изучить и использовать.
2. Введение в SVG
svg — это также новый тег в HTML5, очень похожий на Canvas. Можно реализовать рисование и анимацию. Однако svg рисует все векторные изображения, в отличие от холста, который основан на пикселях, поэтому при увеличении он будет размытым. Картинки, нарисованные в формате svg, не подойдут. Полное название SVG на английском языке — «Масштабируемая векторная графика», что означает масштабируемую векторную графику. Этот тип элемента совершенно особенный и его необходимо позиционировать с помощью функции name().
3.Основное использование SVG
svg работает в html и css, а не в js.
<body>
<svg width="500" height="500"> </svg>
</body>3.1 Нарисуйте прямую линию
1. Справочный код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Пекин-Хонге</title>
<style>
svg {
margin-left: 100px;
margin-top: 100px;
border: 1px solid black
}
</style>
</head>
<body>
<svg width="500" height="500">
<!-- Первые два значения line (прямая линия) — это координаты начальной точки, а последние два значения — координаты конечной точки. -->
<line x1="100" y1="100" x2="200" y2="200" stroke="red"></line>
</svg>
</body>
</html>2. Браузер откроется, как показано ниже:
3.2 Нарисуйте прямоугольник
1. Справочный код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Пекин-Хонге</title>
<style>
svg {
margin-left: 100px;
margin-top: 100px;
border: 1px solid black
}
</style>
</head>
<body>
<svg width="500" height="500">
<!-- Первые два значения rect (прямоугольника) — это положение, два средних значения — это закругленные углы, а последние два значения — для установки ширины и высоты. -->
<rect x="50" y="20" rx="10" ry="10" width="150" height="150"></rect>
</svg>
</body>
</html>2. Браузер откроется, как показано ниже:
3. Давайте посмотрим, как добавить стиль CSS — полый прямоугольник.
rect{
fill:transparent; //Устанавливаем прозрачный цвет
stroke: red; //Обводка красная
}
3.3 Рисование дуги
1. Справочный код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Пекин-Хонге</title>
<style>
svg {
margin-left: 100px;
margin-top: 100px;
border: 1px solid black
}
</style>
</head>
<body>
<svg width="500" height="500">
<!-- cirle（Дуга）Первое значение впереди — установить радиус круга.,Следующее значение — это позиция。заполненный круг-->
<!-- Вы можете установить CSS на прозрачный, а затем установить обводку, и она станет полым кругом. -->
<circle r="50" cx="200" cy="100"></circle>
</svg>
</body>
</html>2. Браузер откроется, как показано ниже:
3.4 Нарисуйте эллипс
1. Справочный код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Пекин-Хонге</title>
<style>
svg {
margin-left: 100px;
margin-top: 100px;
border: 1px solid black
}
</style>
</head>
<body>
<svg width="500" height="500">
<!-- эллипс (эллипс) Первое значение — это ширина круга.,Второй - высота круга.,Последние два значения — это положение круга-->
<!-- Вы можете установить CSS прозрачным, а затем установить обводку, и она станет полой. -->
<ellipse rx="60" ry="30" cx="100" cy="100"></ellipse>
</svg>
</body>
</html>2. Браузер откроется, как показано ниже:
3.5 Рисование ломаной линии
1. Справочный код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Пекин-Хонге</title>
<style>
svg {
margin-left: 100px;
margin-top: 100px;
border: 1px solid black
}
polygon,polyline{
fill:transparent; //Устанавливаем прозрачный цвет
}
.bi{
fill: transparent;
stroke: red; //Обводка красная
stroke-width: 3px;
}
</style>
</head>
<body>
<svg width="500" height="500">
<!-- многоугольник (полилиния) Начальная точка будет соединена с конечной точкой -->
<!-- Вы можете установить CSS прозрачным, а затем установить обводку, и она станет полой. -->
<polygon class="bi" points="100 100, 200 50, 300 100, 400 50" stroke-width="3"></polygon>
<!-- полулиния (полилиния) Начальная точка будет соединена с конечной точкой -->
<!-- Вы можете установить CSS прозрачным, а затем установить обводку, и она станет полой. -->
<polyline class="bi" points="100 200, 200 150, 300 200, 400 150" stroke-width="3"></polyline>
</svg>
</body>
</html>2. Браузер откроется, как показано ниже:
3.6 Нарисовать текст
1. Справочный код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Пекин-Хонге</title>
<style>
svg {
margin-left: 100px;
margin-top: 100px;
border: 1px solid black
}
</style>
</head>
<body>
<svg width="500" height="500">
<!-- text (текст) — то же самое, что абсолютное позиционирование -->
<text x="400" y="150">123</text>
</svg>
</body>
</html>2. Браузер откроется, как показано ниже:
4. Атрибуты стиля
4.1fill: цвет заливки (по умолчанию черный)
4.2 инсульта: цвет линии (по умолчанию черный)
4.3stroke-width: ширина линии.
4.4stroke-linecap
Stroke-linecap: стиль в конце линии (по умолчанию) Butt (закругленный угол) round (квадрат) Квадрат, круглый и квадратный влияют на длину линии
Стиль по умолчанию не установлен, а настройки отличаются от приведенных выше.
круглый (закругленные углы)
квадрат
Stroke-linejoin: Доступные значения: скос, закругление, фаска, наследование. Атрибут соединения штриха определяет форму углов пути. «Митра» — значение по умолчанию, «скругление» — плавное соединение, «скос» — это значение. полилинейное соединение, и «inherit» наследуется.
round
bevel
Непрозрачность: непрозрачность 0–1 (можно установить для заливки или обводки).
Используйте полученные выше знания, чтобы создать небольшую демонстрацию.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
svg {
margin-left: 100px;
margin-top: 100px;
border: 1px solid black;
}
rect{
fill: transparent;
stroke: black;
stroke-width: 5px;
}
polygon{
fill: black;
}
circle{
fill: transparent;
stroke: black;
stroke-width: 4px;
}
.yan{
fill: black;
}
.bi{
fill: transparent;
stroke: black;
stroke-width: 3px;
}
ellipse{
fill: transparent;
stroke: black;
stroke-width: 3px;
}
text{
stroke: red;
}
</style>
</head>
<body>
<svg width="500" height="500">
<rect x="100" y="100" rx="15" ry="15" width="300" height="300"></rect>
<polygon points="110 100, 130 60, 190 95, 250 60, 310 95,370 60, 390 100"></polygon>
<circle r="20" cx="190" cy="200"></circle>
<circle r="20" cx="320" cy="200"></circle>
<circle class="yan" r="5" cx="198" cy="208"></circle>
<circle class="yan" r="5" cx="328" cy="208"></circle>
<polygon class="bi" points="240 300, 250 260, 270 300"></polygon>
<ellipse rx="30" ry="10" cx="260" cy="330"></ellipse>
<text x="200" y="440">Ты выглядишь красиво перед экраном</text>
</svg>
</body>
</html>
Хорошо, брат Хонг просто кратко понял и представил SVG, потому что подумал, что это весело. Давайте официально перейдем к сегодняшней теме.
5.Позиционирование элемента SVG
Согласно предыдущему вступлению, брат Хун сам написал демо-версию, включая теги svg, как показано ниже:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Пекин-Хонге</title>
<style>
svg {
margin-left: 100px;
margin-top: 100px;
border: 1px solid black
}
</style>
</head>
<body>
<div id="app1">
<svg width="500" height="200">
<!-- text (текст) — то же самое, что абсолютное позиционирование -->
<text x="400" y="150">123</text>
</svg>
</div>
<div id="app2">
<svg width="500" height="200">
<!-- text (текст) — то же самое, что абсолютное позиционирование -->
<text x="400" y="150">456</text>
</svg>
</div>
</body>
</html>5.1 Обычное позиционирование
1. Нажимаем F2 на клавиатуре или открываем режим разработчика браузера. Начинаем использовать js-код в консоли для позиционирования. Как показано ниже:
2. После нажатия Enter возвращается результат. Мы ясно видим, что он пуст и ни один элемент не найден. Это показывает, что этот метод не работает.
5.2 позиционирование функции имени
1. Нажимаем F2 на клавиатуре или открываем режим разработчика браузера. Начинаем использовать js-код в консоли для позиционирования. Как показано ниже:
2. После нажатия Enter возвращается результат. Мы ясно видим, что к элементу расположены 2 SVG. Докажите, что этот метод осуществим.
6. Используйте несколько элементов SVG на странице.
1. Если на странице используется несколько элементов svg,проходить//*[name()="svg"] Все элементы svg будут расположены. Чтобы отличить, какой из них находится, можно отличить его по родительскому элементу.
//*[@id="box1"]//*[name()="svg"]
2. Помимо использования родительских элементов для различения, вы также можете использовать другие комбинации атрибутов svg, а также другие атрибуты в сочетании с и.
//*[name()="svg" and @width="500"]
7. Разместите дочерние элементы на SVG.
1. Если вам нужно найти подэлементы в SVG, см. текстовый атрибут на рисунке ниже.
2. Как и в предыдущем методе позиционирования, по-прежнему используйте функцию name() для поиска метки подэлемента.
//*[@id="app1"]//*[name()="svg"]/*[name()="text"]
8. Расположение холста
Метод позиционирования Canvas аналогичен методу SVG. Брат Хонг не будет здесь вдаваться в подробности, и обычно в теге Canvas будет присутствовать атрибут id. Таким образом, позиционирование становится более удобным через id.
9. Резюме
Сегодня я в основном объясняю и делюсь некоторыми базовыми знаниями и применениями Canvas и SVG, а затем перехожу к объяснению темы, связанной с позиционированием SVG. Есть ощущение, что это несложно для тех, кто может этому научиться, но несложно и для тех, кому сложно. Ладно, сегодня уже поздно. Это введение в позиционирование элементов Canvas и SVG. Оно предназначено только для справки и обучения друзьям или детям. Спасибо за ваше терпеливое чтение! ! !
Углубленный анализ переполнения памяти CUDA: OutOfMemoryError: CUDA не хватает памяти. Попыталась выделить 3,21 Ги Б (GPU 0; всего 8,00 Ги Б).
[Решено] ошибка установки conda. Среда решения: не удалось выполнить первоначальное зависание. Повторная попытка с помощью файла (графическое руководство).
Прочитайте нейросетевую модель Трансформера в одной статье
.ART Теплые зимние предложения уже открыты
Сравнительная таблица описания кодов ошибок Amap
Уведомление о последних правилах Points Mall в декабре 2022 года.
Даже новички могут быстро приступить к работе с легким сервером приложений.
Взгляд на RSAC 2024｜Защита конфиденциальности в эпоху больших моделей
Вы используете ИИ каждый день и до сих пор не знаете, как ИИ дает обратную связь? Одна статья для понимания реализации в коде Python общих функций потерь генеративных моделей + анализ принципов расчета.
Используйте (внутренний) почтовый ящик для образовательных учреждений, чтобы использовать Microsoft Family Bucket (1T дискового пространства на одном диске и версию Office 365 для образовательных учреждений)
Руководство по началу работы с оперативным проектом (7) Практическое сочетание оперативного письма — оперативного письма на основе интеллектуальной системы вопросов и ответов службы поддержки клиентов
[docker] Версия сервера «Чтение 3» — создайте свою собственную программу чтения веб-текста
Обзор Cloud-init и этапы создания в рамках PVE
Корпоративные пользователи используют пакет регистрационных ресурсов для регистрации ICP для веб-сайта и активации оплаты WeChat H5 (с кодом платежного узла версии API V3)
Подробное объяснение таких показателей производительности с высоким уровнем параллелизма, как QPS, TPS, RT и пропускная способность.
Удачи в конкурсе Python Essay Challenge, станьте первым, кто испытает новую функцию сообщества [Запускать блоки кода онлайн] и выиграйте множество изысканных подарков!
[Техническая посадка травы] Кровавая рвота и отделка позволяют вам необычным образом ощипывать гусиные перья! Не распространяйте информацию! ! !
[Официальное ограниченное по времени мероприятие] Сейчас ноябрь, напишите и получите приз
Прочтите это в одной статье: Учебник для няни по созданию сервера Huanshou Parlu на базе CVM-сервера.
Cloud Native | Что такое CRD (настраиваемые определения ресурсов) в K8s?
Как использовать Cloudflare CDN для настройки узла (CF самостоятельно выбирает IP) Гонконг, Китай/Азия узел/сводка и рекомендации внутреннего высокоскоростного IP-сегмента
Дополнительные правила вознаграждения амбассадоров акции в марте 2023 г.
Можно ли открыть частный сервер Phantom Beast Palu одним щелчком мыши? Супер простой урок для начинающих! (Прилагается метод обновления сервера)
[Играйте с Phantom Beast Palu] Обновите игровой сервер Phantom Beast Pallu одним щелчком мыши
Maotouhu делится: последний доступный внутри страны адрес склада исходного образа Docker 2024 года (обновлено 1 декабря)
Кодирование Base64 в MultipartFile
5 точек расширения SpringBoot, супер практично!
Глубокое понимание сопоставления индексов Elasticsearch.
15 рекомендуемых платформ разработки с нулевым кодом корпоративного уровня. Всегда найдется та, которая вам понравится.
