Вопрос по xaml – Равномерно расположенные тире с StrokeDashArray

5

Я пытаюсь создать покерную фишку, подобную той, что здесь:http://www.casinowholesalers.com/shop/product_info.php?cPath=57&products_id=379 используя Expression Blend 4 для приложения WP7.1 Silverlight 4.

Я пытаюсь создать шесть белых "квадратов". на краю чипа (игнорируя пока изображения костей и внутреннюю пунктирную линию). То, как я это сделал, - создать два эллипса, один без обводки, другой с точно таким же размером, но с обводкой 24, цветом белым и массивом StrokeDashArray до 1,8 (что не равно «1 8»). это фактически 1,8 без второго значения). Это выглядит довольно близко к равномерным размерам и разнесенным (но не совсем); Я нашел это методом проб и ошибок. XAML ниже.

<Grid x:Name="LayoutRoot" Background="Transparent">
    <Grid.RowDefinitions>
        <RowDefinition Height="Auto"/>
        <RowDefinition Height="*"/>
    </Grid.RowDefinitions>
    <Ellipse Fill="#FFC83838" Margin="112,253,128,275" Grid.Row="1" Stroke="#FFC83838" StrokeThickness="3"/>
    <Ellipse Fill="#FFC83838" Margin="112,253,128,275" Grid.Row="1" Stroke="White" StrokeThickness="30" StrokeDashArray="1.79" StrokeDashOffset="6" RenderTransformOrigin="0.5,0.5"/>
</Grid>

Я думаю, у меня есть два вопроса:

Is there a better way to create this shape besides using two ellipses? How can I mathematically determine what the StrokeDashArray value should be so the dashes are evenly spaced and sized instead of using trial and error?
В зависимости от того, что вы делаете с ними (вы не сказали), это может быть проще, быстрее и использовать меньше памяти для создания изображений и использовать их вместо этого. Matt Lacey
@MattLacey - я в основном работаю над версией игры в казино, поэтому я собираюсь создавать экземпляры фишек повсюду: в нижней части пользовательского интерфейса, который будет символизировать «банк» пользователей; Мне нужно будет создать экземпляр, когда они нажимают / касаются экрана, чтобы сделать ставку, мне нужно будет генерировать их в пользовательском интерфейсе для выплаты, если пользователь выигрывает, и т. Д. Я планирую создать его в качестве пользовательского элемента управления. и создавать новые экземпляры по мере необходимости. Я открыт для предложений. Я использовал изображения для других целей - на вкладке «Не приходи». ставки и сложные способы ставок, например, я использовал изображения для игры в кости. Jeff

Ваш Ответ

1   ответ
11

Я начну со второго пункта.

Во-первых, внутренняя логикаStrokeDashArray объясняетсяВот, Важным моментом вл етс то, что массив штрихов штрихов не выражен в пикселях, он зависит от толщины штрихов, чтобы получить окончательное значение пиксел дл каждого числа в массиве.

Итак, для математической части, давайте определим некоторые переменные:

  1. S - visible portion of the stroke (same as in the link).
  2. G - the non-visible portion of the stroke (same as in the link).
  3. r - the radius of your chip. It will be half of the actual width or half of the actual height.
  4. n - the number of repetitions of S+G that you want. Integer.
  5. T - stroke thickness
  6. p - the mathematical pi (3.14...)

Итак, мы имеем:

2*p*r = n*(T*S+T*G)

Или же,

S+G = 2pr/nT

В вашем случае, и то, что я вижу на изображении чипа, видимая часть обводки имеет квадратную форму, поэтому S = 1, есть шесть белых квадратов с шестью пробелами, поэтому n = 6, и вы выбрали толщину 30 пикселей, поэтому T = 30. Это дает вам значение G как:

G = 2pr/180 - 1

Вы можете получить значение r из blend, фактическая ширина и высота будут записаны в скобках в полях Ширина и Высота - разделите их на два. Из предоставленных вами деталей, я предполагаю, что радиус равен 102,55. И последний штрих тире массив:

StrokeDashArray="1,2.58"

Для вашего первого пункта ответ: это зависит. Если ваш чип остается неизменным на протяжении всего срока службы приложения - это лучший способ. Это дает вам небольшую кривизну снаружи, чтобы сделать «квадрат» вровень с внешним контуром микросхемы и требует одноразового расчета во время проектирования.

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

Если существует потребность в переменных размерах и маршрут окна просмотра не работает - существует другой способ его реализации (потому что Silverlight завершается неудачно, когда вы связываетесь со свойствами ActualWidth \ ActualHeight) - с помощьюBorderс прямоугольниками. Но он открывает новую банку с червями, и этот ответ достаточно длинный. :)

Спасибо за выдающийся ответ - я ценю детали! Я думаю, что я пропустил часть в документации о взаимосвязи между толщиной хода и длиной штрихов / промежутков. Учитывая это, становится совершенно ясно, почему я не смог получить именно то, что хотел. Jeff
Кроме того, это будет чип одинакового размера, поэтому я продолжу то, что я начал, а вы помогли мне закончить. Jeff

Похожие вопросы