Sign in to follow this  
Richardcsts

Gradient Color Error

Recommended Posts

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

image.png.4a06aaa66c9736afe33b06fda443f1a7.png

If i use this code in javascript without pixi.js

image.thumb.png.813fe78bf0838312e9feea0a166ae7c5.png

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.