Ошибка при разборе значения для «пути клипа» - PullRequest
Новая
       2

Ошибка при разборе значения для «пути клипа»

0 голосов
/ 03 июня 2018

Я пытаюсь создать путь обрезки вокруг мыши пользователя.Это мой код: 

const rect = this.image.getBoundingClientRect();
const width = rect.right - rect.left;
const height = rect.bottom - rect.top;

const clipSizePx = 10;
const clipSizePerc = 100 * (clipSizePx / Math.max(width, height));

const mouseXPerc = 100 * ((e.clientX - rect.left) / width);
const mouseXStartPerc = Math_cap(mouseXPerc - clipSizePerc / 2, 0, 100);
const mouseXEndPerc = Math_cap(clipSizePerc/2 + mouseXPerc, 0,100);

const mouseYPerc = 100 * ((e.clientY - rect.top) / height);
const mouseYStartPerc = Math_cap(mouseYPerc - clipSizePerc / 2, 0, 100);
const mouseYEndPerc = Math_cap(mouseYPerc + clipSizePerc / 2, 0, 100);
const clipPath = "clip-path: polygon(0% 0%, 0% 100%, "
    + mouseXStartPerc + "% 100%,"
    + mouseXStartPerc + "% " + mouseYStartPerc + "%,"
    + mouseXEndPerc + "% " + mouseYStartPerc + "%,"
    + mouseXEndPerc + "% " + mouseYEndPerc + "%,"
    + mouseXStartPerc + "% " + mouseYEndPerc + "%,"
    + mouseXStartPerc + "% 100%,"
    + " 100% 100%,"
    + " 100% 0%);";
console.log("Clip path: ", clipPath,"\nMouse: ", [mouseXPerc, mouseYPerc]);
this.image.style.clipPath = clipPath;

Это путь клипа, который я пытаюсь назначить: 

clip-path: polygon(0% 0%, 0% 100%, 30.90039334549982% 100%,30.90039334549982% 58.02269121483121%,32.229061634508525% 58.02269121483121%,32.229061634508525% 59.351359503839916%,30.90039334549982% 59.351359503839916%,30.90039334549982% 100%, 100% 100%, 100% 0%);

Это ошибка, совершенно бесполезная:

Ошибка при разборе значения для «пути клипа».Объявление отброшено.

Мне действительно интересно, почему ошибки CSS всегда были такими бесполезными.

В любом случае, кто-нибудь видит, что не так с путем клипа?

1 Ответ

0 голосов
/ 03 июня 2018

Правило не должно заканчиваться точкой с запятой 

el.style.clipPath = "polygon(...)";   // OK
el.style.clipPath = "polygon(...);";  // Fail
...