设置了禁用插值。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掉整个画布,然后使用缩放,然后全部重新画。