Question

canvas图片缩放-JS中canvas画布绘制中如何实现缩放，位移，旋转

Answer 1

canvas中图片缩放禁用

设置了禁用插值。canvas是一款业内非常著名的ACD公司推出的一款顶级的矢量绘图软件,canvas中图片缩放禁用是因为设置了禁用插值,重新设置即可。canvas能够无缝集成用于绘画、图像编辑和Web设计的等工具,软件能够以多种的格式导出绘画作品。

JS中canvas画布绘制中如何实现缩放，位移，旋转

(2,2);

缩放的是整个画布,缩放后,继续绘制的图形会被放大或缩小。

(x,y)方法重新映射画布上的(0,0)位置

x:添加到水平坐标(x)上的值

y:添加到垂直坐标(y)上的值

发生

位移

后,相当于把画布的0,0坐标更换到新的x,y的位置,所有绘制的新元素都被影响。

位移画布一般配合缩放和旋转等。

(angle);方法旋转当前的绘图

注意参数是弧度(PI)

如需将角度转换为弧度,请使用degrees*公式进行计算。

如何在固定的canvas画布内缩放

如何在固定的canvas画布内缩放

<scripttype='text/javascript'src=></script>

<scripttype='text/javascript'>

functionbindchangesize(jq){

vartouchstarttime=0;记录手指按住萤幕的时间

vardbx=0;

vardby=0;

varpretevent=false;

varstartX;按住时座标X

varstartY;按住时座标Y

varstartLen;

varisstart=false;

varisonefinger=true;判断是否是一只手指按住萤幕

('touchstart',_touchstart);

('touchmove',_touchmove);

('touchend',_touchend);

function_touchstart(e){

isstart=true;

isonefinger=true;

if(pretevent){

e.sPropagation();

}

varttime=(newDate()).getTime();

vartouch;

if(typeofe.clientX!='undefined'){

touch=e;

}else{

touch=e.[0];

if(e.&&e.>1){

isonefinger=false;

}

}

startX=;

startY=;

if(!isonefinger){

vartouch1=e.[1];

varx=;

vary=;

startLen=((startX-x,2)+(startY-y,2));

}

if(!isonefinger){

touchstarttime=ttime;

}

}

function_touchmove(e){

vartouch;

varjq0=$(this);

jq0.s(true,true);

if(typeofe.clientX!='undefined'){

touch=e;

}else{

touch=e.[0];

}

varx=;

vary=;

varzoom=(0).;

if(zoom==0)zoom=1;

if(!isonefinger){

vartouch1=e.[1];

varx1=;

vary1=;

varnowlen=((x1-x,2)+(y1-y,2));

varlen=nowlen-startLen;

if(len<0){

len=nowlen;

}else{

len=startLen+len;

}

varpercent=len/startLen;

varchangezoom=zoom*percent;

if(changezoom>5){

changezoom=5;

}

if(changezoom<0.5){

changezoom=0.5;

}

({zoom:changezoom});

}

}

function_touchend(e){

startX=null;

startY=null;

isstart=false;

isonefinger=true;

startLen=0;

}

}

functionbindevent(){

varjqcanvas1=$('#canvasid');通过ID找到canvas

bindchangesize(jqcanvas1);

}

</script>

简单的写了一个,你试试

通过zoom属性来控制的

简单思路就是:

禁止浏览器缩放;

处理touch事件,当为两指操作缩放时停止事件传播;

canvas方面,始终设定context的原点在canvas元素中心点;

每次触发缩放就clear掉整个画布,然后使用缩放,然后全部重新画。