two.js

two.js copied to clipboard

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: then when I resize the window, the image should resize: 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:

Environment (please select one):

• [X] Code executes in browser (e.g: using script tag to load library)
• [ ] Running headless (usually Node.js)
• [ ] Packaged software (e.g: ES6 imports, react, angular, vue.js)

Desktop (please complete the following information):

• OS: [Windows]
• Browser [Brave]
• Version [Version 1.44.101 Chromium: 106.0.5249.65 (Official Build) (64-bit)]

Smartphone (please complete the following information):

• Device: [Nokia 6.1]
• OS: [Android 10]
• Browser [Brave]
• Version [1.43.93, Chromium 105.0.5195.127]

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...

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