Перейти к содержанию

Вопросы

Привет. Как можно рисовать TPath? Зайдя в его свойства я вижу это:

post-1145-0-65451500-1457454937_thumb.jp

Поделиться сообщением


Ссылка на сообщение

Рекомендуемые сообщения

  • 0

Эээ, я лишь Path3D Использовал, но полагаю это то же самое. И в чём вопрос? Куда за какими свойствами ты заходишь?

Работа с ним выглядит так:

Path3D1->Path->Clear();
Path3D1->Path->MoveTo(TPointF(0,0));
Path3D1->Path->LineTo(TPointF(100, 200));
Path3D1->Path->ClosePath();

Поделиться сообщением


Ссылка на сообщение
  • 0

НЕ. Не програмно. Вот в стилях (TStyleBook) есть кнопка с TPath. То что на этом TPath видно на скрине выше. Вот как мне свои TPath делать, а не использовать уже готовые?

Поделиться сообщением


Ссылка на сообщение
  • 0

Рисуешь что-то в векторном редакторе сохраняешь как svg. Открываешь в блокноте или в другом текстовом редакторе, убери лишние теги и вставь в TPath. Таким способом я вырисовывал достаточно сложные фигуры.

Поделиться сообщением


Ссылка на сообщение
  • 0

Если нужно нарисовать простую фигуру (треугольник, ромб, трапеция итп), то можно самому писать, строя отрезки. 

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

Grafyk.png

Обратите внимание на направление оси Y.

Координаты точек:

A (0,0)

B (2,-2)

С (2,0)

Значит TPathData будет такой: M0,0 L2,-2 L2,0 L0,0

M - Move to

L - Line to

(в конце возвращаемся в исходную точку)

или можно так

M0,0 L2,-2 L2,0 Z 

Поделиться сообщением


Ссылка на сообщение
  • 0

Рисуешь что-то в векторном редакторе сохраняешь как svg. Открываешь в блокноте или в другом текстовом редакторе, убери лишние теги и вставь в TPath. Таким способом я вырисовывал достаточно сложные фигуры.

Не все редакторы сохраняют в SVG. Можешь ли ты написать название редактора в котором ты работал?

Поделиться сообщением


Ссылка на сообщение
  • 0
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   version="1.1"
   id="svg2"
   viewBox="0 0 744.09448819 1052.3622047"
   height="297mm"
   width="210mm">
  <defs
     id="defs4" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     id="layer1">
    <rect
       y="240.93364"
       x="194.28572"
       height="574.28571"
       width="402.85715"
       id="rect3336"
       style="fill:#0000ff;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1" />
  </g>
</svg>

Так, и что мне с этим делать? При вставке в нужное поле и сохранение, ничего не происходит...(((

Поделиться сообщением


Ссылка на сообщение
  • 0

sviat, Нарисуйте сначала что-нибудь карандашиком, затем сохраните... ищите в файле "<path  ...  d=" - вот все что в d, то и вставляйте в PathData

Отредактировал Rusland

Поделиться сообщением


Ссылка на сообщение
  • 0

Вот, например, взял данные из svg и простым Ctrl-C/Ctrl-V скопировал в PathData

M121.720001220703,37.5099983215332 C134.070007324219,37.4599990844727 146.419998168945,37.3300018310547 158.770004272461,37.25 C149.610000610352,52.1599998474121 140.360000610352,67.0100021362305 131.229995727539,81.9400024414063 C123.230003356934,81.5400009155273 115.169998168945,82.4599990844727 107.540000915527,84.9100036621094 C112.309997558594,69.120002746582 116.959999084473,53.2999992370605 121.720001220703,37.5099983215332 Z M134.979995727539,82.3499984741211 C145.630004882813,67.3099975585938 156.210006713867,52.2099990844727 166.850006103516,37.1599998474121 C179.839996337891,41.4199981689453 192.839996337891,45.6500015258789 205.820007324219,49.9300003051758 C189.960006713867,63.2700004577637 173.820007324219,76.3000030517578 158.110000610352,89.8099975585938 C150.740005493164,86.379997253418 143.130004882813,83.25 134.979995727539,82.3499984741211 Z M81.5100021362305,55.5699996948242 C91.6999969482422,51.4799995422363 101.910003662109,47.4500007629395 112.110000610352,43.4099998474121 C109.519996643066,57.5999984741211 106.819999694824,71.7799987792969 104.290000915527,85.9800033569336 C97.2699966430664,88.9700012207031 90.629997253418,92.8899993896484 84.9700012207031,98.0299987792969 C83.8000030517578,83.879997253418 82.6800003051758,69.7300033569336 81.5100021362305,55.5699996948242 Z M53.9900016784668,84.0400009155273 C61.1300010681152,77.1500015258789 68.1999969482422,70.1900024414063 75.4499969482422,63.4099998474121 C77.9700012207031,75.5500030517578 80.5100021362305,87.6900024414063 83.0699996948242,99.8199996948242 C78.0299987792969,104.819999694824 73.870002746582,110.660003662109 70.6800003051758,116.98999786377 C65.1699981689453,105.980003356934 59.5499992370605,95.0199966430664 53.9900016784668,84.0400009155273 Z M88.0699996948242,106.139999389648 C98.8600006103516,95.0599975585938 114.519996643066,88.9599990844727 129.970001220703,89.9100036621094 C142.520004272461,90.5100021362305 154.679992675781,95.7799987792969 163.949996948242,104.230003356934 C144.149993896484,117.919998168945 124.339996337891,131.580001831055 104.540000915527,145.25 C106.300003051758,150.710006713867 108.129997253418,156.149993896484 109.970001220703,161.580001831055 C112.029998779297,161.130004882813 114.080001831055,160.679992675781 116.129997253418,160.240005493164 C119.220001220703,166.880004882813 122.230003356934,173.559997558594 125.23999786377,180.240005493164 C124.690002441406,180.220001220703 123.580001831055,180.190002441406 123.029998779297,180.169998168945 C114.559997558594,179.059997558594 105.790000915527,178.589996337891 97.4400024414063,180.710006713867 C94.6699981689453,181.470001220703 91.9100036621094,182.570007324219 89.8600006103516,184.649993896484 C79.1800003051758,174.789993286133 72.6399993896484,160.559997558594 72.3399963378906,146 C71.8600006103516,131.300003051758 77.6999969482422,116.559997558594 88.0699996948242,106.139999389648 M90.0899963378906,109.059997558594 C80.9400024414063,117.790000915527 75.2900009155273,130.229995727539 75.4300003051758,142.949996948242 C75.6100006103516,155.449996948242 80.2099990844727,167.699996948242 87.4899978637695,177.779998779297 C90.379997253418,176.729995727539 93.2799987792969,175.729995727539 96.1800003051758,174.75 C89.5999984741211,166.050003051758 84.5599975585938,155.919998168945 83.0899963378906,145.009994506836 C81.7799987792969,135.270004272461 83.9899978637695,124.889999389648 90.0899963378906,117.059997558594 C98.0400009155273,106.639999389648 109.720001220703,100.110000610352 121.220001220703,94.3399963378906 C119.5,93.9300003051758 117.709999084473,93.1900024414063 115.98999786377,94.0400009155273 C106.400001525879,97.0299987792969 97.3399963378906,102.059997558594 90.0899963378906,109.059997558594 Z M43.5299987792969,117.25 C46.560001373291,110.150001525879 49.5999984741211,103.040000915527 52.6199989318848,95.9400024414063 C58.1800003051758,103.970001220703 63.7999992370605,111.940002441406 69.3000030517578,120.01000213623 C67.2799987792969,124.940002441406 65.8300018310547,130.089996337891 65.0100021362305,135.360000610352 C57.8300018310547,129.350006103516 50.6699981689453,123.309997558594 43.5299987792969,117.25 Z M114.01000213623,148.389999389648 C133.880004882813,134.740005493164 153.690002441406,121.01000213623 173.529998779297,107.309997558594 C175.619995117188,117.459999084473 177.649993896484,127.620002746582 179.630004882813,137.789993286133 C158.139999389648,142.559997558594 136.690002441406,147.470001220703 115.209999084473,152.220001220703 C114.800003051758,150.940002441406 114.400001525879,149.669998168945 114.01000213623,148.389999389648 Z M43.1500015258789,144.440002441406 C43.6300010681152,137.460006713867 44.2099990844727,130.479995727539 44.7900009155273,123.51000213623 C51.4000015258789,128.479995727539 58.1199989318848,133.309997558594 64.6500015258789,138.389999389648 C64.2300033569336,143.270004272461 64.3000030517578,148.190002441406 64.9400024414063,153.050003051758 C57.689998626709,150.160003662109 50.4300003051758,147.270004272461 43.1500015258789,144.440002441406 Z M45.2599983215332,150.039993286133 C51.9599990844727,151.910003662109 58.7000007629395,153.619995117188 65.3499984741211,155.649993896484 C66.129997253418,159.850006103516 67.3199996948242,163.979995727539 68.879997253418,167.960006713867 C62.7799987792969,167.929992675781 56.6800003051758,167.899993896484 50.5699996948242,167.830001831055 C48.8499984741211,161.880004882813 47.0200004577637,155.970001220703 45.2599983215332,150.039993286133 Z M125.440002441406,161.210006713867 C130.029998779297,164.050003051758 133.050003051758,168.699996948242 137.470001220703,171.75 C144.039993286133,176.639999389648 151.330001831055,181.190002441406 155.600006103516,188.410003662109 C159.410003662109,194.860000610352 162.350006103516,201.800003051758 164.889999389648,208.839996337891 C161.880004882813,213.759994506836 157.380004882813,217.600006103516 151.960006713867,219.610000610352 C143.119995117188,200.149993896484 134.199996948242,180.710006713867 125.440002441406,161.210006713867 Z M52.9900016784668,171.949996948242 C58.5499992370605,171.229995727539 64.129997253418,170.589996337891 69.7099990844727,169.910003662109 C71.129997253418,173.600006103516 73.7600021362305,176.699996948242 75.0599975585938,180.429992675781 C71.1699981689453,181.880004882813 67.370002746582,183.539993286133 63.4900016784668,185 C60.0299987792969,180.619995117188 56.439998626709,176.339996337891 52.9900016784668,171.949996948242 Z 

Delphi.png

214993062.zip

Отредактировал Rusland

Поделиться сообщением


Ссылка на сообщение
  • 0

Большое спасибо!

 

 

Вопрос решен, тему можно закрывать...

Поделиться сообщением


Ссылка на сообщение
Гость
Эта тема закрыта для публикации ответов.

  • Похожий контент

    • От MrSergei2017
      Здравствуйте, у меня возникла проблемма с коммпонентом TPath. А именно как программно указать TPathData
    • От Макс Войтенко
      я знаю что можно добавить внешний файл в программу по пути (assets\internal)(скриншот) (раньше получали к нему доступ через)
      loadfromfille(GetDocumentsPath()+"test.txt")
      Сейчас GetDocumentsPath убрали из RadStudio и походу заменили чем то.
      я использовал в свой программе директорию 
      loadfromfille(GetHomePath()+"test.txt"), но я не знаю куда мне добавить программу через deploymant (скриншот)
      Тоесть
      1)GetDocumentsPath = (assets\internal) 
      2)GetHomePath= ??????
      3)GetDocumentsPath убрали из radstudio.
      Какую мне прописать директорию чтоб я имел к ней доступ через GetHomePath()??

    • От ENERGY
      Как конвертировать растровую картинку в векторный TPath Firemonkey.
      How to convert a bitmap image (png, jpeg, bmp) into a Firemonkey vector TPath. Manual.

      Плюсы векторных изображений: 
      Можно изменять размер избражения в любую сторону, уменьшать и увеличивать, без потери качества. Картинка всегда будет с четкими краями, без размытия по краям и квадратиков. Можно легко изменять в RunTime цвет заливки и обводной рамки, изменяя цвета в полях Fill и Stroke компонента TPath. Заливка как правило одна - это цвет из свойства Fill Color. Но ... цвет может быть и градиентом из множества цветов, который можно указать в диспетчере объектов, там же можно загрузить и Bitmap как текстуру в качестве заливки.  Можно анимировать изображение, изменяя вышеуказанные свойства, а также направление градиента, размер, толщину обводной линии итд. Тоже можно менять и для Stroke свойства - обводной рамки.
      Минусы:
      Получаемое изображение упрощенное. Т.к. оно может содержать только один путь (Path) и одну плоскость.
      Возможно получиться скомбинировать множества TPath, положив их друг на друга с прозрачностью. 
      Векторное изображение вычисляется и рисуется "в живую", поэтому потребуется больше ресурсов, чем при отрисовке обычных растровых картинок png, jpg, bitmap.
      Что означает нагрузку на аппаратную часть, замедление работы программы и более быструю разрядку мобильного устройства.
      Поэтому если и использовать подобные векторные изображения, то в случае если нужно отобразить большие картинки-символы на разных экранах (не иконки) - например на маленьком экране телефона, и на большом планшете и на еще большем Desktop экране. 
      Хотя в примере \Samples\Object Pascal\Multi-Device Samples\User Interface\CustomListBox\CustomListBox.dproj используется векторная иконка\чекбокс очень простая. 
       
      Преимущества векторного изображения наглядно:

       
      Ингредиенты: 
      1. Векторный редактор, я взял бесплатный inkscape, который можно скачать здесь . 
      2. Картинка. Желательно чтобы картинка была с большим разрешением, от 300px и больше. Если взять изображение маленького размера, например 48x48 или 64x64, то контуры получатся не такими точными. И хотя inkscape все равно применит сглаживание контуров, и квадратиков вы не увидите, обводные линии могут получиться другой формы, к примеру более жирными или могут слиться с другими линиями.
      Исходное изображение лучше брать в формате PNG, т.к. JPEG оставляет артефакты в виде точек, в итоге программа при трассировке может захватить и их, что не желательно. Конечно же если другого исходника нету, то смысла конвертировать jpg в png нет - качество не улучшится.
      Основной метод конвертации - это трассировка изображения, - когда алгоритм ищет края и обводные линии, и на основе их рисует свои. Потому качественные результаты получаться если брать изображение с одной плоскостью, без теней, градиентов и деталей, в стиле Windows 8\10 или Android. Т.н. Flat (плоский) icon. 
      3. IDE RAD Studio Delphi или С++

      Приступим. 
      Запускаем incscape. 
      Размер исходной png картинки 668x720.

      1. Меню File > Open - указываем путь. Иконка загрузилась.
      2. Нажимаем левой кнопкой мыши на картинку, чтобы она выделилась.
      3. Меню Path > Trace Bitmap. Сразу выберите чекбокс Live Preview (см скриншот).
      Здесь есть разные методы, но нам нужна секция Single Scan: Creates a Path. Методы нужно подбирать визуально, "на глаз". 
      Можно также использовать и секцию Multiply Scans, а затем скомбинировать пути в один (Path > Combine), т.к. нам нужен один путь, и один набор. Путь (Path) это набор инструкций о том как и сколько рисовать линий-векторов. Для нашего конкретного случая, этой конкретной иконки, оптимальный вариант Color Quantization и количество цветов = 2.

       
      4. Нажимаем OK и закрываем окно. Появилось наше изображение залитое черным цветом - это и есть наша векторная картинка. 
      Стоит заметить что прямо под ним лежит наше исходного изображение. Чтобы его удалить нужно отодвинуть мышкой векторное изображение, выделить исходную картинку и удалить ее клавишей Delete.  
      5. Вы можете отредактировать пути, выбрав в левой панели инструмент Edit Paths By nodes (F2) или добавить фильтры\эффекты в меню Path > Path Effects. В данном примере я ничего не менял.
      6. File Save As > inkscape SVG .
      7. Открываем полученный SVG файл в блокноте или в Lister тотал коммандера. Ищем массив чисел, который обычно начинается со строчки "<path". Находим эту строчку, нам нужно набор символов, который идет после буквы "d=", к примеру d="m 397.33334,c -48.1 ...-0.326 -1.64129,-0.66405 z" и копируем все, что внутри кавычек в буфер.
      8. Далее в RAD IDE кидаем на форму TPath. В Object Inspector WrapMode устанавливаем в Fit, и в поле Data вставляем из буфера наш код.
      9. Меняем Fill и Stroke цвета на нужные нам значения (здесь я установил желтый цвет и увеличил толщину обводки (Stroke)). 

       
      Еще пару примеров. 
      Дерево - параметры Brightness Cutoff, Threshold 0.370 . Как видите здесь оптимальнее подходит метод Brightness Cutoff.  Здесь исходная png картинка - это дерево черного цвета, я ее распознал, и затем добавил в TPath, а в свойстве Fill указал градиент от черного до зеленого.
      Наушники - Edge Detection 0. Конечно конкретно в этом случае нужно подчищать изображение.

       

      Иногда бывает что при вставке пути в TPath, компонент его отображает некорректно, если снова зайти в DATA TPath, то окажется что часть данных потеряна. 
      Что исправить эту ситуацию, нужно путь упростить. Это значит что после шага 4, нужно выбрать в incscrape меню Path > Simplify, затем снова сохранить файл. 
      Правда Simplify в incscrape работает не очень хорошо, часто загругляет прямые участки. Лучше делать Simplify в Adobe Illustrator.
       
      Статья опубликована на сайте fire-monkey.ru и возможно будет изменяться и дополняться.
      Автор: ENRGY  
      24. 02. 17 
       
    • От Teodor
      Добрый день,
       
      В приложении динамически создается html страница (К примеру)
      const   html_doc = '<html>'+                      '<head>'+                      '</head>'+                      '<body>'+                     <div style="background-image:url(%image_url%)">HELLO WORLD!</div>                     '</body>'+                     '</html>'; Далее средствами StringReplace метка %image_url% подменяется на локальный путь к png файл,
      так вот собственно вопрос, где должен быть задеплоин этот png файл, и какой должен быть путь URL к локальной картинке? Сейчас деплоинг в "Assets\Internal\image.png"
      А путь: TPath.GetDocumentPath + PathDelim + 'image.png' <-- Картинка не грузится..
       
      Заранее благодарю за ответ!
       
    • От brunnengi
      Здравствуйте.
      Подскажите пожалуйста, а есть ли механизм для реализации аминирования отрисовки TPath?
      Т.е. как нарисовать хотя бы линию слева направо с анимацией?
  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×
×
  • Создать...