javascript - EaselJS, Canvas, Bitmap image low quality and registration point not working - Stack Overflow

admin管理员组

文章数量:1026989

I just started using EaselJS for a project I'm working on and I'm a bit stuck with the Bitmap Class.. What I do is add a 3000 x 4000 image to the canvas / stage and let the user scale and rotate it. Mainly I'm using the following function:

@width = 3000
@height = 4000
@scale = 0.2

@bitmap.setTransform( 0, 0, @scale, @scale, 200, 0, 0, @width*@scale/2, @height*@scale/2 )

This all works except for the registration point. The number given to the function is half the image width / height, so should be good. But the rotation is still not from the center..

Also I'm looking for a way to increase the quality of this Bitmap or the Stage.. When the Bitmap is scaled to 0.2, the image isn't visible at all, just a bunch of big blocks / pixels..

Hope someone can help me out here,

Thanks in advance

I just started using EaselJS for a project I'm working on and I'm a bit stuck with the Bitmap Class.. What I do is add a 3000 x 4000 image to the canvas / stage and let the user scale and rotate it. Mainly I'm using the following function:

@width = 3000
@height = 4000
@scale = 0.2

@bitmap.setTransform( 0, 0, @scale, @scale, 200, 0, 0, @width*@scale/2, @height*@scale/2 )

This all works except for the registration point. The number given to the function is half the image width / height, so should be good. But the rotation is still not from the center..

Also I'm looking for a way to increase the quality of this Bitmap or the Stage.. When the Bitmap is scaled to 0.2, the image isn't visible at all, just a bunch of big blocks / pixels..

Hope someone can help me out here,

Thanks in advance

• javascript
• canvas
• bitmap
• coffeescript
• easeljs

Share Improve this question Follow asked Nov 18, 2012 at 23:46 Tim BaasTim Baas 6,18555 gold badges4747 silver badges7474 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

Stupid mistake, my canvas was scaled up so the quality was low even if the image wasn't scaled.

The width and height attributes define the canvas resolution.

The css style width and height define the size of the canvas.

For everybody having problems with quality, you can oversample the canvas:

<style>
  canvas {
    width:200px;
    height:100px;
  }
</style>

<canvas width='400' height='200' />

Source: http://blog.headspin./?p=464

I just started using EaselJS for a project I'm working on and I'm a bit stuck with the Bitmap Class.. What I do is add a 3000 x 4000 image to the canvas / stage and let the user scale and rotate it. Mainly I'm using the following function:

@width = 3000
@height = 4000
@scale = 0.2

@bitmap.setTransform( 0, 0, @scale, @scale, 200, 0, 0, @width*@scale/2, @height*@scale/2 )

This all works except for the registration point. The number given to the function is half the image width / height, so should be good. But the rotation is still not from the center..

Also I'm looking for a way to increase the quality of this Bitmap or the Stage.. When the Bitmap is scaled to 0.2, the image isn't visible at all, just a bunch of big blocks / pixels..

Hope someone can help me out here,

Thanks in advance

I just started using EaselJS for a project I'm working on and I'm a bit stuck with the Bitmap Class.. What I do is add a 3000 x 4000 image to the canvas / stage and let the user scale and rotate it. Mainly I'm using the following function:

@width = 3000
@height = 4000
@scale = 0.2

@bitmap.setTransform( 0, 0, @scale, @scale, 200, 0, 0, @width*@scale/2, @height*@scale/2 )

This all works except for the registration point. The number given to the function is half the image width / height, so should be good. But the rotation is still not from the center..

Also I'm looking for a way to increase the quality of this Bitmap or the Stage.. When the Bitmap is scaled to 0.2, the image isn't visible at all, just a bunch of big blocks / pixels..

Hope someone can help me out here,

Thanks in advance

• javascript
• canvas
• bitmap
• coffeescript
• easeljs

Share Improve this question Follow asked Nov 18, 2012 at 23:46 Tim BaasTim Baas 6,18555 gold badges4747 silver badges7474 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 10

Stupid mistake, my canvas was scaled up so the quality was low even if the image wasn't scaled.

The width and height attributes define the canvas resolution.

The css style width and height define the size of the canvas.

For everybody having problems with quality, you can oversample the canvas:

<style>
  canvas {
    width:200px;
    height:100px;
  }
</style>

<canvas width='400' height='200' />

Source: http://blog.headspin./?p=464

本文标签：