Processing.js允许使用以下方式绘制图像:
image(x,y,width,height)
但是增加宽度&高度参数只会将图像缩放到该大小。
如何裁剪图像并仅将第一个width
像素绘制到右侧,将第一个height
像素绘制到底部?
例如,只绘制X'ed部分:
---------------------------.
|XXXXXXXXXXXXX |
|XXXXXXXXXXXXX |
|XXXXXXXXXXXXX |
|XXXXXXXXXXXXX |
| |
| |
| |
---------------------------.
答案 0 :(得分:2)
您可以使用copy function
有效地裁剪图像以下是一个例子:
PImage oImg;
void setup() {
oImg = loadImage("postgres.jpeg");
size(oImg.width, oImg.height);
}
void draw() {
background(0);
int iStart = new Float(oImg.width/2).intValue();
int iWidth = oImg.width-iStart;
copy(oImg, iStart,0,iWidth,oImg.height,0,0,iWidth,oImg.height);
}
这会加载图像,然后将图像垂直裁剪为其大小的一半。
答案 1 :(得分:0)
听起来像是一个图像精灵:
#yourImage
{
width:46px;
height:44px;
background:url(yourimage.gif) 0 0;
}
答案 2 :(得分:0)
我不知道如何在Processing中执行此操作,但上下文自己的drawImage
支持此https://developer.mozilla.org/en/DOM/CanvasRenderingContext2D#drawImage
context.drawImage(image, x, y, realWidth, realHeight, startX, startY, drawnWidth, drawnHeight)