Вопросы Теги

Отображение предупреждения о совместимости браузера через CSS (поддержка сетки)

Если я правильно истолковываю ваш вопрос, вы пытаетесь найти все коэффициенты в матрице 3D-преобразования, которые наилучшим образом деформируют одну точку на другую. Все, что вам действительно нужно сделать, это поставить эту проблему в линейную систему и решить. Напомним, что деформирование одной точки в другую в 3D просто: 

A*s = t

s = (x,y,z) является исходной точкой, t = (x',y',z') является целевой точкой, а A будет матрицей преобразования 3 x 3, которая форматируется так, что: 

A = [a00 a01 a02]
    [a10 a11 a12] 
    [a20 a21 a22]

Выписывая фактическую систему уравнений A*s = t, получаем: 

a00*x + a01*y + a02*z = x'
a10*x + a11*y + a12*z = y'
a20*x + a21*y + a22*z = z'

Коэффициенты в A - это то, что нам нужно для решения. Переписывая это в матричной форме, получаем: 

[x y z 0 0 0 0 0 0]   [a00]   [x']
[0 0 0 x y z 0 0 0] * [a01] = [y']
[0 0 0 0 0 0 x y z]   [a02]   [z']
                      [a10] 
                      [a11]
                      [a12]
                      [a20]
                      [a21]
                      [a22]

Учитывая, что у вас есть четыре точки, вы просто объединяете строки матрицы слева и вектор справа 

[x1 y1 z1 0 0 0 0 0 0]   [a00]   [x1']
[0 0 0 x1 y1 z1 0 0 0]   [a01]   [y1']
[0 0 0 0 0 0 x1 y1 z1]   [a02]   [z1']
[x2 y2 z2 0 0 0 0 0 0]   [a10]   [x2']
[0 0 0 x2 y2 z2 0 0 0]   [a11]   [y2']
[0 0 0 0 0 0 x2 y2 z2]   [a12]   [z2']
[x3 y3 z3 0 0 0 0 0 0] * [a20] = [x3']
[0 0 0 x3 y3 z3 0 0 0]   [a21]   [y3']
[0 0 0 0 0 0 x3 y3 z3]   [a22]   [z3']
[x4 y4 z4 0 0 0 0 0 0]           [x4']
[0 0 0 x4 y4 z4 0 0 0]           [y4']
[0 0 0 0 0 0 x4 y4 z4]           [z4']

          S            *   a   =   T

S теперь будет матрицей, которая содержит ваши четыре точки источника в формате, показанном выше, a теперь является вектором коэффициентов преобразования в матрице, которую вы хотите решить (упорядоченно в строке format), а T - вектор целевых точек в формате, показанном выше.

Для решения этих параметров вам просто нужно использовать оператор mldivide или \ в MATLAB, который будет вычислять для вас оценку наименьших квадратов. Поэтому: 

a = S^{-1} * T

По существу, просто создайте свою матрицу, как указано выше, затем используйте оператор \ для решения ваших параметров преобразования в вашей матрице. Когда вы закончите, измените форму T на матрицу 3 x 3. Поэтому: 

S = ... ; %// Enter in your source points here like above
T = ... ; %// Enter in your target points in a right hand side vector like above

a = S \ T;
similarity_matrix = reshape(a, 3, 3).';

Что касается вашей ошибки при малых возмущениях каждой из координат, тем больше у вас очков. Использование 4, безусловно, даст вам решение, но этого недостаточно, чтобы смягчить любые ошибки, на мой взгляд.

Незначительное примечание. Это (более или менее) то, что fitgeotrans делает под капотом. Он вычисляет лучшую гомографию, учитывая кучу исходных и целевых точек, и определяет это с использованием наименьших квадратов.

Надеюсь, это ответили на ваш вопрос!

2
задан rap-2-h 13 July 2018 в 14:51
поделиться

3 ответа

Вы можете использовать @supports для этого.

Показывать предупреждение по умолчанию и скрывать, если поддерживается функция, которая вам нужна. 

div {
   display: block;
   margin: 1em;
   text-align: center;
   border: solid red 4px;
}

@supports(display: grid) {
    .grids { display: none; }
}

@supports(display: fakedisplay) {
    .fakedisplay { display: none; }
}
<div class="grids">Grid is not supported</div>

<div class="fakedisplay">Fake Display is not supported</div>

2
ответ дан Quentin 17 August 2018 в 12:34
поделиться
  • 1
    но поддерживает поддержку , поддерживаемую всем браузером? – Temani Afif 13 July 2018 в 14:58
  • 2
    @TemaniAfif Если supports не поддерживается, сообщение отображается и, очевидно, сетка не поддерживается;) – G-Cyr 13 July 2018 в 15:00

Это зависит. Теоретически вы можете использовать @supports . ~ Единственная проблема заключается в том, что @supports не имеет достаточной поддержки для браузера, чтобы вы могли положиться на нее. ~

edit: @ Ответ Квентина показывает, что вы можете сделать обратное этому поддерживающие браузеры отключили сообщение, что является отличным решением для возражения поддержки моего браузера.

Если у вас есть веская причина не использовать JS и не против, чтобы это не работало во всех версии IE и более старые версии каждого браузера, вы можете сделать что-то вроде 

@supports not (text-align: center) {
    .myTextAlignCenterNotSupportedDivMessage {
        display: block;
    }
}

. Но это не мой подход. Это было бы неприемлемо. Вы не могли использовать LocalStorage, чтобы запомнить их выбор. И др.

1
ответ дан mccambridge 17 August 2018 в 12:34
поделиться

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

Вот идея. Откройте это, используя старый браузер IE, чтобы увидеть результат. 

.box {
  display:grid;
  grid-template-columns:0px;
  grid-template-rows:0px;
}
.box * {
 overflow:hidden;
}
<div class="box">
<div>I am a div inside a grid, if you see me than you cannot use grid</div>
</div>

1
ответ дан Temani Afif 17 August 2018 в 12:34
поделиться
Другие вопросы по тегам:

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