jonobr1 / two.js

A renderer agnostic two-dimensional drawing api for the web.
https://two.js.org
MIT License
8.29k stars 454 forks source link

[Bug] features not working properly on Two.Texture obj #665

Open joex92 opened 1 year ago

joex92 commented 1 year ago

Describe the bug After creating a texture neither the texture.scale, nor the texture.className, nor the texture.image.style features do a thing on the texture...

To Reproduce Steps to reproduce the behavior:

  1. Create a texture: tex = new two.Texture('[image-url]')
  2. apply it to an object: rect.fill = tex
  3. modify the texture: tex.scale = 0.5
  4. the texture is not changed

Expected behavior for the texture to change according to either the className or modifying it.

Screenshots here I scale it to the canvas width and move it to the center: image then when I resize the window, the image should resize: image but as you can see here, the image seems to be resized but it's not, you can see it tilling when it should be smaller: image

Environment (please select one):

Desktop (please complete the following information):

Smartphone (please complete the following information):

Additional context the texture.repeat doesn't work either... it should by default not repeat, but as you can see in the screenshots it repeats... the image used is from another web page, not loaded locally... I'm applying the texture to a path.stroke...

jonobr1 commented 1 year ago

I can confirm that the scale, offset, and repeat values are not respected on the SVG Renderer. However, it looks like it works fine for me in canvas: https://codepen.io/jonobr1/pen/QWrmdMz

Are you using the latest version?

The default values are repeated because of the way SVG works. Two.js aims to create consistencies between different rendering types. That being said, I'm trying to rewrok the Two.Texture class so that it doesn't do the Two.Sprite behavior by default and acts more like an image. See this issue for more details and branch developments: https://github.com/jonobr1/two.js/issues/653