Тень прерывается невидимыми границами

Я делаю простую кнопку, используя код ниже

Item {
  id: menuButton
  width: 124
  height: 124

  Rectangle {
    id: menuButtonIcon
    x: parent.width - 75
    y: parent.height - 80
    color: "#C02A25"
    width: 60
    height: 60
    radius: width * 0.5
    antialiasing: true
  }

  DropShadow {
        id: menuButtonIconShadow
        source: menuButtonIcon
        anchors.fill: menuButtonIcon
        width: source.width
        height: source.height
        cached: true
        radius: 8.0
        samples: 16
        color: "#000000"
        smooth: true
        horizontalOffset: 10.0
        verticalOffset: 10.0
        spread: 0.2
        transparentBorder: True
    }
}

И получившаяся тень выглядит так, будто она резко обрывается.

введите здесь описание изображения

Почему это так, и как я могу это исправить?


qt qml
person dearn44    schedule 26.06.2015    source источник
comment
Ваш menuButton слишком мал.   -  person Kuba hasn't forgotten Monica    schedule 26.06.2015
comment
Моя кнопка в порядке. Изменение его размера не поможет, потому что тень последует и снова будет обрезана. Но на этот раз в меньшую кнопку.   -  person dearn44    schedule 26.06.2015
comment
Это связано с тем, что граф сцены QML составляет объекты из прямоугольников с помощью OpenGL, и, насколько я понимаю, все, по существу, обрезается до заявленных размеров. В QML1 было иначе. Чтобы это исправить, теневой элемент должен вычислить свой правильный размер (прямо через привязки по ширине и высоте - самый простой способ) и использовать эти значения.   -  person mlvljr    schedule 27.06.2015
comment
..но учитывая, что это стандартный пункт (на самом деле), я бы начал с регистрации ошибки (и поиска в трекере похожих проблем).   -  person mlvljr    schedule 27.06.2015

Ответы (2)


arrow_upward
3
arrow_downward

Код в порядке, если вы пишете true вместо True в теге transparentBorder.

person ealiaj    schedule 26.06.2015

arrow_upward
0
arrow_downward

Увеличьте width элемента и посмотрите, исправится ли он.

id: menuButton
width: 140
height: 140

или уменьшите размер Rectangle, которому был присвоен размер 60X60. Потому что позиция кнопки начинается с x=124-75, что равно 49, и с y=124-80, что равно 44.

Размер внешнего блока равен 124, ваша кнопка начинается с 49 и заканчивается 109 (поскольку width задается как 60). У вас осталось только 11 пикселей для тени во внешней рамке, чего недостаточно для radius и spread, которые вы используете.

Вы также можете попробовать уменьшить разброс до 0.15 и с radius до 6.0, чтобы уменьшить тень.

person Trinadh venna    schedule 26.06.2015
comment
Это не причина проблемы. Я сказал, что тень прерывается невидимыми границами (точнее, останавливается на воображаемом прямоугольнике, охватывающем ее источник), а не окном или его родителем. Проблема сохранится, даже если я использовал элемент размером 2000x2000. - person dearn44; 26.06.2015
comment
Хотя это уродливое решение. Что, если я хочу конкретный спред? Должен быть какой-то другой способ, которого я еще не нашел. - person dearn44; 26.06.2015