|
DPI Aware картинки - кто какой техникой пользуется?
|
|||
---|---|---|---|
#18+
Делаю первую WPF-прилагу. Вернее даже компонент, будет вызываться из основного приложения. Приложение без риббонов, но есть кнопки с битмапами. Если бы были риббоны, там всё классно - ставишь список битмапов с соответствующими тегами, и всё ништяк. А кто как с обычными картинками работает? Сразу скажу, основное приложении, и, соответственно компонент - System Aware (не Per-Monitor). Мне пока первое, что пришло в голову - Сделать по текстовому атрибуту в ViewModel-е на каждую кнопку, и просто забиндить source для Image. А внутри сделать приспособу, что бы в зависимости от DPI возвращало нужное имя битмапа. Ну понятно, что новичок сделает всё неправильно. Расскажите, как надо, кто на картинках собаку съел. ... |
|||
:
Нравится:
Не нравится:
|
|||
13.04.2016, 15:48 |
|
DPI Aware картинки - кто какой техникой пользуется?
|
|||
---|---|---|---|
#18+
Правильно - вектор )) ... |
|||
:
Нравится:
Не нравится:
|
|||
13.04.2016, 15:58 |
|
DPI Aware картинки - кто какой техникой пользуется?
|
|||
---|---|---|---|
#18+
Картинки, естественно, растровые. Есть 9 штук каждой - на каждое разрешение. ... |
|||
:
Нравится:
Не нравится:
|
|||
13.04.2016, 15:59 |
|
DPI Aware картинки - кто какой техникой пользуется?
|
|||
---|---|---|---|
#18+
картина должна быть на уровне View, предпочтительнее всего закидывать нужные картинки в проект как Resources, создавать ресурсы XAML для них как BitmapSource и источников качестве uri ресурса самой картинки, если их много, то и ресурсов должно быть много. Далее используй либо их через динамические ресурсы по статическому ключу ресурса, либо статические ресурсы по обычному ключу для просты дела. Если 1 элемент интерфейса имеет несколько состояний и для каждого состояния своя картинка, делай триггеры и переключай ресурсы, либо подменяй ресурс по ключу (в варианте с динам. ресурсами) Не стоит забывать, что разрешение в WPF не всегда 96 dpi. Есть еще несколько проблем, проблема А) если элемент спозиционирован не точно по пикселю, то всё его содержимое так же смещается и пиксели картинки оказывают между точками в WPF, что сильно смазывает саму картинку, но: можно выравнивать элемент по точкам свойством SnapToDevicePixels и + можно менять тип рендеринга Б) в ItemsControl элементах (и с панелями), размер элемента списка может не быть круглым числом, по этой причине все последующие элементы будут позиционироваться не в точное значение, а дробное, что тоже будет приводит к сдвигу картинки по ~0,n пикселов и её смазывание, можно округлять размер с помощью свойства В) проблема в том, что когда ты выравниваешь картинку по пикселями в круглые значения, сама картинка оказывается не точно над пикселем, а между ними. Смысл в том, что при разрешении 96 dpi, координаты 0.0 это начало 1 (нулевого) пикселя, а 1.0 его конец и начало 2 пикселя. Г) WPF это не WinForms, WPF изначально заложена векторная графика, по этому наилучшим образом туда подходит именно векторная графика. Геометрические иконкам можно менять цвет, размер, создавать анимацию, нет ни каких проблем в dpi, позиционированием, рендерингом, особенно в Visual контролах, где для этого есть соответствующий метод для Geometry объектов. С векторной иконкой можно точно определить область действия этой иконки, то есть к примеру внутри кнопки можно сделать области, которые не будут являться поверхностью кнопки (дырки в контроле) :) p.s. я давно не юзаю растр. графику в WPF, по этому надеюсь тут будут какие то советы ... |
|||
:
Нравится:
Не нравится:
|
|||
13.04.2016, 21:39 |
|
DPI Aware картинки - кто какой техникой пользуется?
|
|||
---|---|---|---|
#18+
Roman Mejtes, а в чём сейчас рисуют значки? SVG? ... |
|||
:
Нравится:
Не нравится:
|
|||
14.04.2016, 11:59 |
|
DPI Aware картинки - кто какой техникой пользуется?
|
|||
---|---|---|---|
#18+
Неважно в чем рисовать, в ресурсы они складываются в виде XAML (Geometry и т.п.) ... |
|||
:
Нравится:
Не нравится:
|
|||
14.04.2016, 12:11 |
|
DPI Aware картинки - кто какой техникой пользуется?
|
|||
---|---|---|---|
#18+
13thRoman Mejtes, а в чём сейчас рисуют значки? SVG?я из AI иконки делаю, но можно и из SVG, в AI удобно стандартным Blend'ом это делать ... |
|||
:
Нравится:
Не нравится:
|
|||
14.04.2016, 16:00 |
|
DPI Aware картинки - кто какой техникой пользуется?
|
|||
---|---|---|---|
#18+
Roman Mejtesя из AI иконки делаю, но можно и из SVG, в AI удобно стандартным Blend'ом это делать А какой формат вектора понимает 2010 студия? Я что-то SVG попробовал - не схавала. Как из AI в студию вставляешь, поподробнее можно? ... |
|||
:
Нравится:
Не нравится:
|
|||
22.04.2016, 13:55 |
|
DPI Aware картинки - кто какой техникой пользуется?
|
|||
---|---|---|---|
#18+
Shocker.Pro, не понял, что ты хотел сказать? ... |
|||
:
Нравится:
Не нравится:
|
|||
22.04.2016, 13:58 |
|
DPI Aware картинки - кто какой техникой пользуется?
|
|||
---|---|---|---|
#18+
13thShocker.Pro, не понял, что ты хотел сказать?13thкакой формат вектора понимает 2010 студия?XAML. Векторные рисунки хранят в словарях ресурсов в виде XAML. http://professorweb.ru/my/WPF/graphics_and_animation/level12/graph_animation_index.php ... |
|||
:
Нравится:
Не нравится:
|
|||
22.04.2016, 14:08 |
|
DPI Aware картинки - кто какой техникой пользуется?
|
|||
---|---|---|---|
#18+
Shocker.ProXAML. Векторные рисунки хранят в словарях ресурсов в виде XAML. http://professorweb.ru/my/WPF/graphics_and_animation/level12/graph_animation_index.php Это да. А как из Adobe Illustrator перевести в XAML? И что это за формат, прям файл с расширением XAML получается? Это точно не SVG - я попробовал, не работает: Код: xml 1. 2. 3.
... |
|||
:
Нравится:
Не нравится:
|
|||
22.04.2016, 14:14 |
|
DPI Aware картинки - кто какой техникой пользуется?
|
|||
---|---|---|---|
#18+
Спросил у дизайнера, он говорит, у него в AI нет никакого XAML ... |
|||
:
Нравится:
Не нравится:
|
|||
22.04.2016, 14:15 |
|
DPI Aware картинки - кто какой техникой пользуется?
|
|||
---|---|---|---|
#18+
Expression Blend умеет конвертировать AI (и некоторые другие форматы) в разные варианты XAML ... |
|||
:
Нравится:
Не нравится:
|
|||
22.04.2016, 14:36 |
|
DPI Aware картинки - кто какой техникой пользуется?
|
|||
---|---|---|---|
#18+
я пользуюсь вот этим https://www.microsoft.com/en-us/download/details.aspx?id=36180 ... |
|||
:
Нравится:
Не нравится:
|
|||
22.04.2016, 14:38 |
|
DPI Aware картинки - кто какой техникой пользуется?
|
|||
---|---|---|---|
#18+
Shocker.Proя пользуюсь вот этим https://www.microsoft.com/en-us/download/details.aspx?id=36180 собственно, в нем можно и рисовать, хотя штука менее удобная, чем корел, но это дело привычки скорее всего. По крайней мере можно сделать мелкие правки загруженного извне изображения ... |
|||
:
Нравится:
Не нравится:
|
|||
22.04.2016, 14:40 |
|
DPI Aware картинки - кто какой техникой пользуется?
|
|||
---|---|---|---|
#18+
Shocker.Pro, я тут нашёл софтину, которая конвертинует SVG -> XAML. В результате получается или UserControl или Canvas, но по сути - это не изображения. Т.е. мы делаем XAML-файл, в качестве хранилища внешнего ресурса, кладём туда этот UserControl или Canvas и потом цепляем его, например, на кнопку, вместо Image. И больше ничего делать не надо, оно само ресайзится под нужный DPI/размер, под пиксели подстраивается и т.д. Я правильно понял? ... |
|||
:
Нравится:
Не нравится:
|
|||
22.04.2016, 14:47 |
|
DPI Aware картинки - кто какой техникой пользуется?
|
|||
---|---|---|---|
#18+
13thShocker.Pro, я тут нашёл софтину, которая конвертинует SVG -> XAML. В результате получается или UserControl или Canvas, но по сути - это не изображения. Т.е. мы делаем XAML-файл, в качестве хранилища внешнего ресурса, кладём туда этот UserControl или Canvas и потом цепляем его, например, на кнопку, вместо Image. И больше ничего делать не надо, оно само ресайзится под нужный DPI/размер, под пиксели подстраивается и т.д. Я правильно понял? Если картинка моноцветная, то можно сохранить просто геометрию, которая получена в результате импорта, если иконка многоцветная, то берем полученный Canvas и вставляем куда надо, если картинок несколько, то можно Canvas обернуть в DataTemplate'ы или использовать x:Shared, куча всяких вариантов ... |
|||
:
Нравится:
Не нравится:
|
|||
22.04.2016, 14:55 |
|
DPI Aware картинки - кто какой техникой пользуется?
|
|||
---|---|---|---|
#18+
Ещё вопрос: как управлять большими объёмами картинок? Допустим, у меня в приложении 500 картинок. Сложить все в один XAML-файл? А как посмотреть оригинал? Рисовать форму, и вставлять в неё картинку? )-: В общем, хотелось бы что-бы кто-нибудь рассказал о граблях, на которые тут можно наступить. В идеале было бы как в старой студии: есть картинки в каком-то внятном формате, их можно по-мелочи подредактировать прямо в студии, а при сборке проекта они конвертируются в XAML, им проставляются id-шники и делается build. В принципе, для этого можно настроить pre-build step, если бы была тулза, которая конвертирует набор файлов в xaml с заданными id-шниками. ... |
|||
:
Нравится:
Не нравится:
|
|||
22.04.2016, 15:59 |
|
DPI Aware картинки - кто какой техникой пользуется?
|
|||
---|---|---|---|
#18+
13thShocker.Pro, я тут нашёл софтину, которая конвертинует SVG -> XAML. В результате получается или UserControl или Canvas, но по сути - это не изображения.Я дал ссылку на софтину. Она умеет создавать GeometryDrawing или сразу готовые кисти. ... |
|||
:
Нравится:
Не нравится:
|
|||
22.04.2016, 16:23 |
|
DPI Aware картинки - кто какой техникой пользуется?
|
|||
---|---|---|---|
#18+
13thДопустим, у меня в приложении 500 картинок.организовать в несколько словарей ресурсов, можно каскадно. ... |
|||
:
Нравится:
Не нравится:
|
|||
22.04.2016, 16:24 |
|
DPI Aware картинки - кто какой техникой пользуется?
|
|||
---|---|---|---|
#18+
13thА как посмотреть оригинал?Blend позволяет открывать непосредственно солюшен и визуально редактировать в нем XAML-ы. ... |
|||
:
Нравится:
Не нравится:
|
|||
22.04.2016, 16:26 |
|
DPI Aware картинки - кто какой техникой пользуется?
|
|||
---|---|---|---|
#18+
Shocker.Pro13thShocker.Pro, я тут нашёл софтину, которая конвертинует SVG -> XAML. В результате получается или UserControl или Canvas, но по сути - это не изображения.Я дал ссылку на софтину. Она умеет создавать GeometryDrawing или сразу готовые кисти. Ага, хорошая ссылка, спс, разобрался. ... |
|||
:
Нравится:
Не нравится:
|
|||
22.04.2016, 16:35 |
|
DPI Aware картинки - кто какой техникой пользуется?
|
|||
---|---|---|---|
#18+
Shocker.Pro13thА как посмотреть оригинал?Blend позволяет открывать непосредственно солюшен и визуально редактировать в нем XAML-ы. Блин, мы пока до бленда не добрались. Могу позволить себе только VS2010. ... |
|||
:
Нравится:
Не нравится:
|
|||
22.04.2016, 16:38 |
|
DPI Aware картинки - кто какой техникой пользуется?
|
|||
---|---|---|---|
#18+
В общем, сделал картинку, вот что получилось: (см аттач). Пока 9 растровых картинок получается красивее. Вот что мне сгенерил Expression Designer: Код: xml 1. 2. 3. 4. 5. 6. 7.
Вот как использую: Код: xml 1.
Можно как-то сделать, что бы было пиксель-в пиксель? Ну хотя бы на кратных 100% (96DPI) разрешениях? ... |
|||
:
Нравится:
Не нравится:
|
|||
22.04.2016, 16:44 |
|
DPI Aware картинки - кто какой техникой пользуется?
|
|||
---|---|---|---|
#18+
чтоб было пиксель в пиксель, 1 пиксель должен иметь не 0 координаты, а 0,5 то есть указывать на середину пикселя, а не на его начало. Для этого в DrawContext есть методы PushGuidelineSet. Код: c# 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24.
А вот еще 1 пример для отображения Bitmap рисунков, он не мой и его стоит объединить с верхним варианте, так как там смещение какой то хитро сделано :) Код: c# 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 29. 30. 31. 32. 33. 34. 35. 36. 37. 38. 39. 40. 41. 42. 43. 44. 45. 46. 47. 48. 49. 50. 51. 52. 53. 54. 55. 56. 57. 58. 59. 60. 61. 62. 63. 64. 65. 66. 67. 68. 69. 70. 71. 72. 73. 74. 75. 76. 77. 78. 79. 80. 81. 82. 83. 84. 85. 86. 87. 88. 89. 90. 91. 92. 93. 94. 95. 96. 97. 98. 99. 100. 101. 102. 103. 104. 105. 106. 107. 108. 109. 110. 111. 112. 113. 114. 115. 116. 117. 118. 119. 120. 121. 122. 123. 124. 125. 126. 127. 128. 129. 130. 131. 132. 133. 134. 135. 136. 137. 138. 139. 140. 141. 142. 143. 144. 145. 146. 147. 148. 149. 150. 151. 152. 153. 154. 155. 156. 157. 158. 159. 160. 161. 162. 163. 164. 165. 166. 167. 168. 169. 170. 171. 172. 173. 174. 175. 176. 177. 178. 179. 180. 181. 182. 183. 184. 185. 186. 187. 188. 189. 190. 191. 192. 193. 194. 195. 196. 197. 198. 199. 200. 201. 202. 203. 204. 205. 206. 207. 208. 209. 210. 211. 212. 213. 214. 215. 216. 217. 218. 219. 220. 221.
... |
|||
:
Нравится:
Не нравится:
|
|||
22.04.2016, 17:02 |
|
DPI Aware картинки - кто какой техникой пользуется?
|
|||
---|---|---|---|
#18+
Так, главу по рисованию я пропустил. Вернёмся к этой тебе через пару дней. ... |
|||
:
Нравится:
Не нравится:
|
|||
22.04.2016, 17:38 |
|
DPI Aware картинки - кто какой техникой пользуется?
|
|||
---|---|---|---|
#18+
Чё-то поковырялся я с картинками, и пришёл к печальному выводу, что единственный способ сделать картинки pixel-precise - это всё-таки рисовать битмапы, т.е. растры. Как ни стараешься приноровить вектор к разным разрешениям - всё равно ко всем не приспособишь. Как ни выставляй координаты, толщину линий, SnapToDevicePixels и т.п. - всё равно где-то да будет размытым. По крайней мере у меня не получилось, и в инете тоже не удалось найти пример, что бы всё рисовалось идеально. Самое лучшее, что получается - точные картинки на 96DPI-кратных размерах экранов. Шаг в сторону - всё, борода. Буду рад, если кто-нибудь опровергнет меня. ... |
|||
:
Нравится:
Не нравится:
|
|||
26.04.2016, 18:43 |
|
DPI Aware картинки - кто какой техникой пользуется?
|
|||
---|---|---|---|
#18+
Когда-то давно иконки делали 16-тицветными, 16х16 или 8х8, все упиралось как в небольшие разрешения мониторов, так и в небольшое количество цветов (например, 256-цветный режим видеокарты был обыденным явлением). Тогда и появился стиль попиксельного рисования при небогатой палитре и попытки уместить как можно более яркий смысл в столь ограниченных возможностях. Сейчас 24-битный цвет и высокое разрешение - норма, что позволяет делать богатые цветами и эффектами иконки с закруглениями, полутонами, плавными переходами, тенями и т.п. WPF заточен, в общем-то, на это, там не так принципиальна привязка к краю пиксела. Ты на предыдущей странице привел пример своих иконок - в общем-то в олдскульном стиле. Пожалуй, WPF в меньшей степени заточен под них. ... |
|||
:
Нравится:
Не нравится:
|
|||
26.04.2016, 19:06 |
|
DPI Aware картинки - кто какой техникой пользуется?
|
|||
---|---|---|---|
#18+
Это была не иконка из моего приложения, это я из Excel-а взял команду "Транспонировать таблицу" (: Но вообще, да, я занимаюсь разработкой приложения в области торговли. А там такие ретрограды, что чуть что не так - тебя просто говном закидают. Вот пример иконок из последней версии нашего приложения (eps), естественно, их перерисовали в битмапы, вот что получилось (png). ... |
|||
:
Нравится:
Не нравится:
|
|||
27.04.2016, 14:13 |
|
DPI Aware картинки - кто какой техникой пользуется?
|
|||
---|---|---|---|
#18+
Блин, EPS-ка не вставилась. Она размером больше чем все картинки вместе взятые (: ... |
|||
:
Нравится:
Не нравится:
|
|||
27.04.2016, 14:15 |
|
DPI Aware картинки - кто какой техникой пользуется?
|
|||
---|---|---|---|
#18+
13thА там такие ретрограды, что чуть что не так - тебя просто говном закидают.жизнь - борьба! ... |
|||
:
Нравится:
Не нравится:
|
|||
27.04.2016, 14:27 |
|
DPI Aware картинки - кто какой техникой пользуется?
|
|||
---|---|---|---|
#18+
13thвот что получилось (png).Воооот. О чем я и говорил. А вот та же картинка из экселя 2010. Обрати внимание, что она более мягкая, с тенями, не содержит черных однопиксельных линий и явно без проблем будет мастшабироваться в векторе в любое разрешение (да она скорее всего и есть векторная). При этом выглядит гораздо симпатичнее, чем приведенная тобой. ... |
|||
:
Нравится:
Не нравится:
|
|||
27.04.2016, 14:34 |
|
DPI Aware картинки - кто какой техникой пользуется?
|
|||
---|---|---|---|
#18+
Shocker.Pro, ты, конечно же, не прав. Во первых, вот тебе офис, в 175 и в 200%. Всё нарисовано с точность до пикселя. Причём, и на 175% (168DPI), а это дробное скалирование, не 100, не 200. Ну и в последних офисах есть библиотека с рисунками. Изображений - сотни. И там каждого не по 9, как у меня, а по 14. Т.е. с расчётом, больше чем 350% ещё наделано. Так что, похоже нет никакой "серебрянной пули". Вектор хорош, если ты на мониторе нарисовал, а потом плакат 2 на 6 метров напечатал. А для мелочи - пока растр. ... |
|||
:
Нравится:
Не нравится:
|
|||
27.04.2016, 16:26 |
|
DPI Aware картинки - кто какой техникой пользуется?
|
|||
---|---|---|---|
#18+
На сотке размыто, наверное, оттого, что всё-таки 24*24 - мало места, что бы всё чётко отрисовать, приходится рисовать с полутонами. Но как только размер вырастает, всё, полутона пропадают, все линии чётко в 1 px ... |
|||
:
Нравится:
Не нравится:
|
|||
27.04.2016, 16:27 |
|
|
start [/forum/topic.php?all=1&fid=21&tid=1440687]: |
0ms |
get settings: |
10ms |
get forum list: |
14ms |
check forum access: |
3ms |
check topic access: |
3ms |
track hit: |
66ms |
get topic data: |
10ms |
get forum data: |
3ms |
get page messages: |
66ms |
get tp. blocked users: |
2ms |
others: | 263ms |
total: | 440ms |
0 / 0 |