DrawImage Houdini CSS Paint API - PullRequest
Новая
       3

DrawImage Houdini CSS Paint API

0 голосов
/ 29 ноября 2018

Я пробую CSS Paint API Houdini на Chrome 70, и я не могу этот пример работать: https://github.com/w3c/css-houdini-drafts/blob/master/css-paint-api/EXPLAINER.md#drawing-images

Я передаю изображение через пользовательское свойство, например: 

--my-image: url("bridge.jpg");

и я использую уровень API свойств и значений CSS (включается через флаг функций Experimental Web Platform), чтобы зарегистрировать свойство изображения: 

CSS.registerProperty({
  name: '--my-image',
  syntax: '<image> | none',
  initialValue: 'none',
  inherits: false,
});

Затем я пытаюсь нарисовать его в своем рабочем листе: 

class MyWorklet {
  static get inputProperties() { 
    return ['--my-image']; 
  }

  paint(ctx, geom, properties) {
    const img = properties.get('--my-image');
    console.log(img);
    ctx.drawImage(img,10,10,150,180);    
  }
}
registerPaint('myworklet', MyWorklet);

для отображения рабочего окна я сделал простой 500 * 500 div и добавил стиль: 

background-image: paint(myworklet);

Консоль сообщает мне, что img является CSSImageValue ,так что, кажется, это работает каким-то образом, но изображение не прорисовывается на фоне div.

Кто-нибудь сумел заставить это работать или есть какие-то функции, которые еще не нужны для такого рода вещей?реализована?

1 Ответ

0 голосов
/ 31 декабря 2018

Изображение не реализовано в Chrome до сих пор.Должен быть доступен в последнем техническом обзоре Safari (v72).Но для этого требуется встроенный код, см. https://vitaliy -bobrov.github.io / blog / try-paint-wroklet-in-safari-tp /

...