Richardcsts Posted October 31, 2019 Share Posted October 31, 2019 please i need help!! //Here is the gradient function function Gradient(x, y, w, h, startColor, endColor){ let p1 = x+100 let p2 = y+50 let p3 = x+w-100 let p4 = y+h-80 let cvs = document.createElement('canvas') cvs.width = window.innerWidth-20 cvs.width = window.innerHeight-20 let ctx = cvs.getContext('2d') let grd = ctx.createLinearGradient(p1, p2, p3, p4) grd.addColorStop(0, startColor) grd.addColorStop(1, endColor) ctx.fillStyle = grd ctx.fillRect(x, y, w, h) return new PIXI.Texture.from(cvs) } //This is the params let x = 240 let y = 100 let h = 200 let w = 200 let a = new PIXI.Graphics() .beginTextureFill(app.Gradient(x, y, w, h, '#ff0000', '#00ff00')) .drawRect(x, y, w, h) .endFill() app.stage.addChild(a) My output is this: a red rectangle???, why?... If i use this code in javascript without pixi.js Quote Link to comment Share on other sites More sharing options...
Exca Posted November 1, 2019 Share Posted November 1, 2019 I'd assume it has something to do with the canvas being larger than what the drawing target is. When you start the texturefill it uses the 0,0 point of canvas as starting point and your graphic is starting only at 240,100. Draw the canvas with the size that you want to use the final graphics. Quote Link to comment Share on other sites More sharing options...
ivan.popelyshev Posted November 1, 2019 Share Posted November 1, 2019 You use strange coordinates, why do you even need full-screen texture? Just in case, there are two pixijs examples with gradient: https://pixijs.io/examples/#/textures/gradient-basic.js , https://pixijs.io/examples/#/textures/gradient-resource.js Also make sure you understand difference between "graphics.position.set(100, 100); graphics.drawRect(0,0,10,10)" and "graphics.drawRect(100, 100, 10, 10)" - texture shift is different! In case if you cant set position somehow, you can pass offset matrix to beginTextureFIll. To help you more, I need full case on jsfiddle, codepen or pixiplayground Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.