Как установить Paper.js Цвет заливки фона холста (нет фона CSS)

Question

Я работаю над анимацией paper.js. Анимация содержит несколько путей. Я использую ccapture.js для экспорта анимации в видео. Что делает ccapture.js - это захват рисунка на холсте кадр за кадром и преобразование его в видео.

Проблема, с которой я столкнулся, заключается в том, что в анимации я хочу, чтобы цвет фона холста был белым. Если я установил фоновый цвет холста с помощью css background-color: white;, ccapture проигнорирует этот цвет, а цвет фона в захваченном видео будет черным, так как белый цвет не будет нарисован на холсте и будет только фоном элемента. Я тестировал этот метод без везения.

Я попытался добавить белый прямоугольник в анимацию, но он скрывает анимацию, и все, что я мог видеть, это белый прямоугольник. Я нашел ссылку на функцию, чтобы положить белый прямоугольник на спине с помощью sentToBack() из следующих answer, я использую это так:

var rect = new Path.Rectangle({ 
    point: [0, 0], 
    size: [view.size.width/2, view.size.height/2], 
    strokeColor: 'white', 
    fillColor: 'white', 
    selected: true 
}); 
rect.sendToBack(); 

Я не могу найти ссылку на эту функцию в paper.js документации поэтому я не уверен, правильно ли я использую его.

Я также попытался создать прямоугольник в начале документа, а также в конце документа, считая, что порядок создания путей может решить проблему. Но это не помогает.

Есть ли другой способ, с помощью которого я могу установить цвет заливки фона на белый. Пожалуйста, задайте мне более подробную информацию. Спасибо заранее.

Answer 1

После @Kostas ответа. Я снова проверил код других путей, которые я создал. Я использовал blendMode: 'screen' с другими путями, которые я создал. Это вызывало другие сочетания с экраном: docs После удаления этого свойства он работал, как ожидалось.

Дополнительная информация: sendToBack() работает так, как я использовал в коде.

Пути сложены в том порядке, в котором они созданы в документе. Сначала созданный путь будет по всем другим путям (если г-индекс не не изменяется с помощью sendToBack() или insertBelow() метода)

Надеется, что это поможет другим ..

Answer 2

Вы должны определить цвет после создания rect.

Попробуйте это:

var rect = new Path.Rectangle({ 
 
    point: [0, 0], 
 
    size: [view.size.width/2, view.size.height/2], 
 
    strokeColor: 'white', 
 
    selected: true 
 
}); 
 
rect.sendToBack(); 
 
rect.fillColor = '#ff0000';