Как нарисовать линию в c

Нарисовать линию в CSS

Как можно нарисовать такую линию в CSS , чтобы она масштабировалась и растягивалась по ширине экрана?

.line-first < margin: 20px; font-size: 250%; color: $pinkcolor; border-bottom: 4px solid #f50057; padding-bottom: 0px; width: 22.4%; margin-left: 100px; text-align: center; >.line-middle < position: relative; top: -52px; left: 389px; border: 2px solid #f50057; width: 85px; height: 0px; -moz-transform: rotate(-30deg); -ms-transform: rotate(-30deg); -webkit-transform: rotate(-30deg); -o-transform: rotate(-30deg); transform: rotate(-40deg); >.line-second

 
Title
 

Отслеживать
4,542 3 3 золотых знака 16 16 серебряных знаков 53 53 бронзовых знака
задан 14 ноя 2018 в 18:09
133 1 1 золотой знак 1 1 серебряный знак 11 11 бронзовых знаков
15 ноя 2018 в 9:22

5 ответов 5

Сортировка: Сброс на вариант по умолчанию

h1 < display: flex; line-height: 1.5em; >span < border-bottom: 2px solid red; padding: 0 2em; >h1:before, h1:after < content: ""; order: 1; >h1:before < width: 1.5em; background: linear-gradient(-45deg, transparent calc(50% - 1px), red calc(50% - 1px), red calc(50% + 1px), transparent calc(50% + 1px)); >h1:after

Заголовок

Отслеживать
ответ дан 14 ноя 2018 в 19:18
122k 24 24 золотых знака 125 125 серебряных знаков 299 299 бронзовых знаков

При чём тут react понять сложно. На css можно сделать так:

* < box-sizing:border-box; >body < margin:0; padding:15px; >.line-block < display:flex; align-items:flex-start; color:red; >.line-block__title < flex:0 0 auto; padding:5px 40px; font-size:14px; font-weight:400; position:relative; margin:0 20px 0 0; border-bottom:1px solid; >.line-block__title:focus < outline:none; >.line-block__title:after < content:''; display:block; position:absolute; bottom:0; right:0; height:100%; transform-origin:left bottom; border-right:1px solid; transform:skewX(-39deg); >.line-block:after

 
Title
 

Отслеживать
ответ дан 14 ноя 2018 в 18:39
10.4k 2 2 золотых знака 15 15 серебряных знаков 36 36 бронзовых знаков

UPD. В первом варианте левый край линии оказался скошен. Исправил.

По старинке, без флексбоксов и закрывая один псевдоэлемент фоном от другого. Зато подстраивается и под длину текста, и под количество строк в нём.

Отступы и высоту строки можно ставить любые. От угла наклона зависит только прибавка к толщине боковой границы. Этой прибавкой компенсируем сужение границы при трансформации сдвига.

.broken-line < overflow: hidden; position: relative; >.broken-line > span < border-bottom: 4px solid red; display: inline-block; padding: 6px 15px; /* для красоты, можно убрать или поменять */ position: relative; >.broken-line:before, .broken-line > span:before < box-sizing: border-box; content: ""; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; transform-origin: left bottom; transform: skew(-60deg); z-index: -1; >.broken-line:before < border-top: 4px solid red; >.broken-line > span:before < background: white; /* заслонить часть псевдоэлемента у родителя */ border-right: 8px solid red; /* толще, чтобы компенсировать трансформацию */ bottom: -4px; /* вниз на толщину границы родителя */ >

Текст
 
Длинный текст 
в две строки

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

.broken-line < overflow: hidden; position: relative; >.broken-line > span < display: inline-block; padding: 6px 15px; /* для красоты, можно убрать или поменять */ position: relative; >.broken-line:before, .broken-line > span:before < content: ""; display: block; position: absolute; top: 0; left: 0; bottom: 0; right: 0; transform-origin: left bottom; transform: skew(-60deg); z-index: -1; >.broken-line:before < border-top: 4px solid red; >.broken-line > span:before < background: white; /* заслонить часть псевдоэлемента у родителя */ border-bottom: 4px solid red; border-right: 8px solid red; /* толще, чтобы компенсировать трансформацию */ >

Текст
 
Длинный текст 
в две строки

Как нарисовать линию в c

То есть, при движении мыши с зажатой кнопкой линия должна динамически обновляться, а при отпускании кнопки добавляться на существующий рисунок. Так как PictureBox удобно сохранять и легко снабдить полосами прокрутки, будем рисовать на ней. Компонента может быть частью интерфейса приложения как в этой заметке или растянутой на всю форму. Проект создан как приложение Windows Forms, код проверен в Visual Studio 2015.

Опишем в классе формы (после директивы #pragma endregion ) необходимые данные:

Для самой формы нам понадобится запрограммировать только событие Load , где мы инициализируем всё, что нужно — создадим рисунок по текущим размерам PictureBox , назначим его компоненте, создадим перо и выставим в «ложь» флажок:

Ещё лучше было создать рисунок размером с клиентскую часть окна формы:

Всё остальное запрограммируем в событиях PictureBox . На нажатие кнопки мыши будем включать флажок и запоминать место клика p1 :

На отпускание кнопки получим координаты второй точки p2 и соединим её с первой, проведя линию на образе Img1 . В реальном коде можно добавлять точки в какой-то контейнер, например, в список как здесь.

На перемещение мыши обработка будет немного хитрей. Если кнопка не зажата, ничего делать не нужно, а в противном случае будем проводить текущую линию на копии рисунка Img2 , созданной из Img1 , чтобы не получилось «веера» из линий при перемещении мыши с зажатой кнопкой. Img2 всё равно придётся временно назначить рисунком для PictureBox , чтобы линия была видна в процессе движения мыши.

Это всё, приложение можно собирать.

P.S. Здесь у нас все координаты были «внутри PictureBox » и получались непосредственно из аргумента MouseEventArgs обработчика события. По-другому можно делать так:

К сожалению, из-за плохой «очистки мусора» (а мы создаём каждый раз временную копию рисунка при движении мыши с зажатой кнопкой) такое приложение может быстро пожирать память.

Как вариант решения проблемы, можно поддерживать список отрисованных линий и обновлять его, когда нужно, а для самой отрисовки задействовать обработчик события Paint от pictureBox1 , вот вся пользовательская часть кода после #pragma endregion для той же формы.

Можно, конечно, ввести ещё список «тип фигуры» и рисовать другие объекты.

Если хотим рисовать просто карандашом «по точкам», можно применять и подход с таймером (код для той же формы):

Как нарисовать линию?

нарисовать линию на панели
вот я открыл панель курса валют как мне нарисовать линию из одной точки в другую

Нарисовать линию по нажатию на панель
int peremX1; int peremY1; int peremX2; int peremY2; private.

GDI+ нарисовать моргающую линию
Как в GDI+ нарисовать моргающую линию?

Как нарисовать пунктирную линию?
Приветствую всех! Подскажите, пожалуйста, почему у меня не получается пунктирная линия (2.

Сообщение было отмечено как решение

Решение

Возможно, мой вопрос звучит странно, но с графикой я работала только на c++ Builder и там можно было добавить на форму компонент для рисования, и левый верхний угол этого компонента был с координатами 0,0 и правый нижний соответственно вычислялся в зависимости от размера.. В .net есть что то подобное?

Добавлено через 1 минуту
ага, пока писала уже ответили

Как нарисовать на форме линию?
Приветствую! Можно ли добавить в область "Toolbox" элемент управления для рисования линии? Что я.

Как нарисовать пунктирную линию
Как в С# нарисовать пунктирную линию??

Как нарисовать линию на изображении
Есть рисунок (200х200), как можно нарисовать на нем линию? Dim imnn As Bitmap . imnn =.

Как нарисовать линию в форме?
как нарисовать линию в windows form application c++. пробовал та: . LineTo(x,y); — не.

Как нарисовать линию на форме?
Казалось бы простой вопрос, но я начинающий. Хэлп плиз)))

Как нарисовать непрерывную линию
При наведении мышки на pictureBox рисуется прерывистая линия ,т.е. точками линия рисуется.

Графика в оконных приложениях

Для рисования графических примитивов в оконных приложениях используются 4 основных типа объектов:

• точка (Pixel);
• перо (Pen);
• кисть (Brush);
• фон (Background).

Точка

Цвет точки задается с помощью функции

В случае удачного завершения возвращаемое значение функции дублирует цвет точки, в случае ошибки возвращает -1.

Цвет точки представляет собой 32-битное число, заданное в системе RGB:

Можно также воспользоваться функцией

Значения красного, зеленого и синего используются в диапазоне 0…255.

Перо используется для рисования линий и контуров замкнутых фигур. Цвет пера задается функцией

Стили пера fnPenStyle могут быть заданы согласно таблице

Значение		Тип	Описание
PS_SOLID	0		Сплошное перо
PS_DASH	1		Прерывистое (пунктирное) перо.
PS_DOT	2		Точечное (штриховое) перо.
PS_DASHDOT	3		Штрих-пунктир
PS_DASHDOTDOT	4		Две точки — пунктир
PS_NULL	5	Невидимое перо

При успешном завершении функция возвращает дескриптор пера, в случае неудачи — константу NULL .

Кисть

Кисть используется для закрашивания замкнутых объектов. Цвет кисти задается с помощью функции

При успешном завершении функция возвращает дескриптор кисти, в случае неудачи — константу NULL .
Эта же функция используется для задания цвета фона .

Можно заранее создать несколько кистей и перьев, а затем выбирать нужные с помощью функции

Рисование графических примитивов

Перемещение в указанную точку осуществляется функцией:

Координаты точки x и у определяются в пикселях относительно левого верхнего угла.
В случае успешного выполнения возвращает ненулевое значение.

Структура POINT имеет вид

Рисование отрезков осуществляется функцией:

В случае успешного выполнения возвращает ненулевое значение.

Рисование прямоугольника осуществляется функцией:

Рисование прямоугольника начинается из точки, в которую осуществлено перемещение с помощью функции MoveTo() .
В случае успешного выполнения возвращает ненулевое значение.

Рисование эллипса осуществляется функцией:

В случае успешного выполнения возвращает ненулевое значение.

Рисование дуги осуществляется функцией:

В случае успешного выполнения возвращает ненулевое значение.

Вывод текста в окно

Для вывода текста в поле окна используется функция

В случае успешного выполнения возвращает ненулевое значение.

Задать цвет фона под буквами можно с помощью функции

Задать цвет букв можно с помощью функции

В случае неудачного завершения эти функции возвращают константу CLR_INVALID=0xFFFF .

Использование графических функций

Для перерисовки окна, в котором будут отображаться графические объекты, будем использовать обработку сообщения WM_PAINT .

Обработка сообщения WM_PAINT почти всегда начинается с вызова функции:

При обработке вызова BeginPaint() , Windows обновляет фон рабочей области с помощью кисти, заданной в поле hbrBackground структуры WNDCLASS , описанной здесь. Вызов BeginPaint() делает всю рабочую область действительной (не требующей перерисовки) и возвращает описатель контекста устройства. Контекст устройства описывает физическое устройство вывода информации (например, экран) и его драйвер. Описатель контекста устройства необходим для вывода в рабочую область окна текста и графики.

• hwnd – дескриптор окна;
• lpPaint – указатель на структуру PAINTSTRUCT .

Структура PAINTSTRUCT имеет вид

• hdc – дескриптор контекста устройства.
• fErase – ненулевое значение стирает фон.
• rcPaint – структура RECT , определяющая верхний левый и нижний правый углы рабочей области.

Комментариев к записи: 3

LRESULT CALLBACK WndProc( HWND hwnd, UINT message, WPARAM wparam, LPARAM lparam)

return DefWindowProc (hwnd, message, wparam, lparam);
> namespace e

Похожие публикации:

1. Как достать boot img из прошивки
2. Как заблокировать сайт в яндекс браузере на телефоне
3. Как завести рено каптур
4. Как загрузить файл на сайт html

Как нарисовать в терминале линию?

Мне нужно нарисовать 10 линий . Из одной точки по одной линии в 10 других точек. Использую библиотеку ncurses желательно было бы найти решение именно с использованием этой библиотечки,пишу под линукс на C++. Пишу небольшую игрушку. 10 на 10 «Лучников». нужно нарисовать анимацию так сказать выстрела,для начала хотелось бы просто линию от одного лучника к другому.

Отслеживать

28.5k 12 12 золотых знаков 59 59 серебряных знаков 118 118 бронзовых знаков

Как нарисовать линию в c

Одним из способов построения двухмерной графики в окне — это использование фигур. Фигуры фактически являются обычными элементами как например кнопка или текстовое поле. К фигурам относят такие элементы как Polygon (Многоугольник), Ellipse (овал), Rectangle (прямоугольник), Line (обычная линия), Polyline (несколько связанных линий). Все они наследуются от абстрактного базового класса System.Windows.Shapes.Shape :

От базового класса они наследуют ряд общих свойств:

Fill заполняет фон фигуры с помощью кисти — аналогичен свойству Background у прочих элементов

Stroke задает кисть, которая отрисовывает границу фигуры — аналогичен свойству BorderBrush у прочих элементов

StrokeThikness задает толщину границы фигуры — аналогичен свойству BorderThikness у прочих элементов

StrokeStartLineCap и StrokeEndLineCap задают для незамкнутых фигур (Line) контур в начале и в конце линии соответственно

StrokeDashArray задает границу фигуры в виде штриховки, создавая эффект пунктира

StrokeDashOffset задает расстояние до начала штриха

StrokeDashCap задает форму штрихов

Ellipse

Ellipse представляет овал:

При одинаковой ширине и высоту получается круг:

Rectangle

Rectangle представляет прямоугольник::

С помощью свойств RadiusX и RadiusY можно округлить углы прямоугольника:

Line представляет простую линию. Для создания линии надо указать координаты в ее свойствах X1, Y1, X2 и Y2. При этом надо учитывать, что началом координатной системы является верхний левый угол:

Polygon

Polygon представляет многоугольник. С помощью коллекции Points элемент устанавливает набор точек — объектов типа Point, которые последовательно соединяются линиями, причем последня точка соединяется с первой:

В данном случае у нас три точки (50, 150), (150, 50) и (250, 150), которые образуют треугольник.

Polyline

Polyline представляет набор точек, соединенных линиями. В этом плане данный элемент похож на Polygon за тем исключением, что первая и последняя точка не соединяются:

Настройка контура

С помощью ряда свойств мы можем настроить отображение контура. Например:

Цвет самого контура определяется с помощью свойства Stroke , а его толщина — с помощью StrokeThickness .

StrokeDashArray устанавливает длину штрихов вместе с отступами. Например, StrokeDashArray=»4 2″ устанавливает длину штриха в 4 единицы, а последующего отступа в 2 единицы. И эти значения будут повторяться по всему контуру. При другой установке, например, StrokeDashArray=»1 2 3″ уже задается два штриха. Первый штрих имеет длину в 1 единицу, а второй — в 3 единицы и между ними расстояие в 2 единицы. И так вы можем настроить количество штрихов и расстояний между ними.

StrokeDashCap задает форму на концах штрихов и может принимать следующие значения:

Flat : стандартные штрихи с плоскими окончаниями

Square : штрихи с прямоугольными окончаниями

Round : штрихи с округлыми окончаниями

Triangle : штрихи с окончаниями в виде треугольников

Программное рисование

Создание фигур программным образом осуществляется так же, как и создаются и добавляются все остальные элементы:

The best way to draw a line in windows form C#

I just want to know the best way to draw a line in windows form without using GDI+,but use control from toolbox.

5 Answers 5

Another solution using Label control

1. Add a Label control to your form.
2. Set Label Text to empty.
3. Set BorderStyle to Fixed3D.
4. Set AutoSize to false.
5. Set Height to 2 (most easily accomplished by typing 2 into the Size/Height field under Label Properties).

Might not be the best choice but should help

You can use my control:

You can draw line runtime by below code:

The Overflow Blog

Linked

Related

Hot Network Questions

Subscribe to RSS

To subscribe to this RSS feed, copy and paste this URL into your RSS reader.

Site design / logo © 2022 Stack Exchange Inc; user contributions licensed under CC BY-SA . rev 2022.12.9.43105

By clicking “Accept all cookies”, you agree Stack Exchange can store cookies on your device and disclose information in accordance with our Cookie Policy.

Программируем на C#

Блог содержит статьи, исходные тексты программ на C#. Здесь можно скачать исходник нужной программы.

Рисование простых линий на форме или элементах управления и печать этих линий

Листинг 5.1. Код для рисования прямой линии.

private void Form1_Paint(object sender, PaintEventArgs e)

//Задаем цвет и толщину пера:

Pen myPen = new Pen(Color.Black, 3);

e.Graphics.DrawLine(myPen, 10, 15, 100, 120);

//Высвобождаем память, выделенную объекту myPen:

Листинг 5.2. Код для рисования кривых линий.

private void Form1_Paint(object sender, PaintEventArgs e)

//Задаем цвет и толщину пера:

Pen myPen = new Pen(Color.Black, 3);

//Рисуем эллипс лица:

e.Graphics.DrawEllipse(myPen, 0, 0, 200, 220);

//Рисуем закрытый глаз как дугу:

e.Graphics.DrawArc(myPen, 35, 35, 35, 35, 180, -180);

//Рисуем открытый глаз как эллипс:

e.Graphics.DrawEllipse(myPen, 120, 35, 35, 35);

//Рисуем нос как линию (сплайн) Безье:

e.Graphics.DrawBezier(myPen, 100, 60, 120, 100,

//Рисуем рот как канонический сплайн:

Point[] apt = new Point[4];

apt[0] = new Point(60, 140);

apt[1] = new Point(140, 140);

apt[2] = new Point(100, 180);

apt[3] = new Point(60, 140);

e.Graphics.DrawCurve(myPen, apt, 0, 3, 0.9f);

//Высвобождаем память, выделенную объекту myPen:

Листинг 5.3. Код на Visual C# для печати изображения на принтере.

private void button1_Click(object sender, EventArgs e)

//Передаем объекту printDialog1 информацию об объекте

//printDocument1 при помощи свойства Document:

//Выводим стандартную панель Print при помощи метода

//ShowDialog() для задания параметров печати

//и после щелчка OK на панели Print печатаем документ

//при помощи метода Print():

if (printDialog1.ShowDialog() == DialogResult.OK)

Листинг 5.4. Код на Visual Basic для печати изображения на принтере.

Private Sub Button3_Click(ByVal sender As System.Object, _

ByVal e As EventArgs) Handles Button3.Click

‘Передаем объекту PrintDialog1 информацию об объекте

‘PrintDocument1 при помощи свойства Document:

‘Выводим панель Print при помощи функции ShowDialog

‘для задания параметров и вызываем процедуру Print():

If PrintDialog1.ShowDialog() = DialogResult.OK Then

Листинг 5.5. Код на прежнем Visual C++ (2002-2004 годов) для печати.

System::Void button3_Click(System::Object * sender,

//Передаем объекту printDialog1 информацию об объекте

//printDocument1 при помощи свойства Document:

//Выводим стандартную панель Print при помощи метода

//ShowDialog() для задания параметров печати

//и печатаем документ после щелчка OK на панели Print

//при помощи метода Print():

if (printDialog1->ShowDialog() == DialogResult::OK)

Листинг 5.6. Код на новом Visual C++ 2005 для печати изображения.

System::Void button3_Click(System::Object^ sender,

//Передаем объекту printDialog1 информацию об объекте

//printDocument1 при помощи свойства Document:

//Выводим стандартную панель Print при помощи метода

//ShowDialog() для задания параметров печати

//и печатаем документ при помощи метода Print():

Если мы не желаем видеть перед печатью стандартную панель Print, то компонент PrintDialog нам не потребуется, а в шаблон обработчика щелчка по кнопке вместо кода на листинге 5.3 записываем только одну строку кода:

Проверяем в действии созданную нами программу для печати на принтере любых изображений. Для этого получаем на экране монитора (по описанной выше методике) заданное изображение и щелкаем кнопку Print.

Появляется стандартная панель Print (рис. 5.5), на которой мы выбираем (или оставляем по умолчанию) принтер и задаем параметры печати. Например, можно изменить ориентацию печати и вместо Portrait (Портрет) выбрать переключатель Landscape (Ландшафт). После щелчка кнопки Печать (Print) или OK принтер печатает только одно изображение без формы и элементов управления.

Как нарисовать линию в c

БлогNot. Visual C++/CLI: рисуем линию на PictureBox «как в Paint»

Visual C++/CLI: рисуем линию на PictureBox «как в Paint»

То есть, при движении мыши с зажатой кнопкой линия должна динамически обновляться, а при отпускании кнопки добавляться на существующий рисунок. Так как PictureBox удобно сохранять и легко снабдить полосами прокрутки, будем рисовать на ней. Компонента может быть частью интерфейса приложения как в этой заметке или растянутой на всю форму. Проект создан как приложение Windows Forms, код проверен в Visual Studio 2015.

Опишем в классе формы (после директивы #pragma endregion ) необходимые данные:

Для самой формы нам понадобится запрограммировать только событие Load , где мы инициализируем всё, что нужно — создадим рисунок по текущим размерам PictureBox , назначим его компоненте, создадим перо и выставим в «ложь» флажок:

Ещё лучше было создать рисунок размером с клиентскую часть окна формы:

Всё остальное запрограммируем в событиях PictureBox . На нажатие кнопки мыши будем включать флажок и запоминать место клика p1 :

На отпускание кнопки получим координаты второй точки p2 и соединим её с первой, проведя линию на образе Img1 . В реальном коде можно добавлять точки в какой-то контейнер, например, в список как здесь.

На перемещение мыши обработка будет немного хитрей. Если кнопка не зажата, ничего делать не нужно, а в противном случае будем проводить текущую линию на копии рисунка Img2 , созданной из Img1 , чтобы не получилось «веера» из линий при перемещении мыши с зажатой кнопкой. Img2 всё равно придётся временно назначить рисунком для PictureBox , чтобы линия была видна в процессе движения мыши.

Это всё, приложение можно собирать.

P.S. Здесь у нас все координаты были «внутри PictureBox » и получались непосредственно из аргумента MouseEventArgs обработчика события. По-другому можно делать так:

К сожалению, из-за плохой «очистки мусора» (а мы создаём каждый раз временную копию рисунка при движении мыши с зажатой кнопкой) такое приложение может быстро пожирать память.

Как вариант решения проблемы, можно поддерживать список отрисованных линий и обновлять его, когда нужно, а для самой отрисовки задействовать обработчик события Paint от pictureBox1 , вот вся пользовательская часть кода после #pragma endregion для той же формы.

Можно, конечно, ввести ещё список «тип фигуры» и рисовать другие объекты.

Если хотим рисовать просто карандашом «по точкам», можно применять и подход с таймером (код для той же формы):

Похожие публикации:

1. C имя за которым следует выражение должно определять класс или пространство имен
2. Iqgeek ru головоломки как собрать
3. Как поменять местами узлы в односвязном списке
4. Как перейти в домашнюю директорию cygwin