矩形平移旋转的仿射变换
By
admin
at 2020-03-24 • 0人收藏 • 1746人看过
考虑用echarts弄个简易的演示画板,里面对一个给定的矩形进行平移旋转
这种旋转平移矩阵应该怎么去计算呢?
先记录一下, 弄通的时候来更新下.哈

var symbolSize = 30;
var data = [[0, 0], [0, 15], [15, 15], [15, 0],[0,0]];
//模拟平移数据
var data2 = [[1, 1], [1, 16], [16, 16], [16, 1],[1,1]];
option = {
title: {
text: 'Try Dragging these Points'
},
grid: {
show: false
},
xAxis: {
splitLine: {show: false},
type: 'value',
boundaryGap: false,
axisLine: {show: false,},
axisLabel: {show: false},
axisTick: {show: false},
},
yAxis: {
splitLine: {show: false},
type: 'value',
axisLine: {show: false,},
axisLabel: {show: false},
axisTick: {show: false},
},
series: [
{
type: 'line',
lineStyle: {
color: 'green',
width: 0
},
showSymbol: false,
data: data2,
areaStyle: {
color: 'green',
},
},
{
type: 'line',
lineStyle: {
color: 'red',
width: 0
},
areaStyle: {
color: 'red',
},
showSymbol: false,
data: data
}
]
};
2 个回复 | 最后更新于 2020-04-08
从上面二楼的echarts旋转结果来看,貌似上面公式有问题, 于是今天用EWDraw控件来画出来判断是不是百度图表绘制变形导致。
结果显示: 公式完全正确,百度图表缩放导致

ewdraw控件测试代码如下:
import win.ui;
/*DSG{{*/
var winform = win.form(text="aardio form";right=759;bottom=741)
winform.add(
button={cls="button";text="开启网格";left=11;top=428;right=175;bottom=470;z=1};
button2={cls="button";text="画线";left=194;top=428;right=288;bottom=470;z=3};
button3={cls="button";text="画圆";left=293;top=428;right=387;bottom=470;z=4};
button4={cls="button";text="画线";left=168;top=486;right=314;bottom=597;z=5};
button5={cls="button";text="画线";left=557;top=564;right=703;bottom=640;z=22};
button6={cls="button";text="计算";left=558;top=481;right=704;bottom=557;z=23};
edit={cls="edit";text="0";left=430;top=423;right=552;bottom=456;edge=1;multiline=1;z=24};
edit1={cls="edit";text="0";left=13;top=480;right=69;bottom=513;edge=1;z=6};
edit10={cls="edit";text="0";left=457;top=489;right=513;bottom=522;edge=1;multiline=1;z=14};
edit11={cls="edit";text="0";left=385;top=528;right=441;bottom=561;edge=1;z=17};
edit12={cls="edit";text="0";left=456;top=527;right=512;bottom=560;edge=1;z=18};
edit13={cls="edit";text="0";left=384;top=568;right=440;bottom=601;edge=1;z=19};
edit14={cls="edit";text="0";left=455;top=569;right=511;bottom=602;edge=1;z=20};
edit15={cls="edit";text="0";left=385;top=616;right=441;bottom=649;edge=1;z=21};
edit16={cls="edit";text="0";left=457;top=615;right=513;bottom=648;edge=1;z=16};
edit2={cls="edit";text="0";left=86;top=480;right=142;bottom=513;edge=1;z=7};
edit3={cls="edit";text="0";left=14;top=524;right=70;bottom=557;edge=1;z=9};
edit4={cls="edit";text="0";left=85;top=523;right=141;bottom=556;edge=1;z=10};
edit5={cls="edit";text="0";left=13;top=564;right=69;bottom=597;edge=1;z=11};
edit6={cls="edit";text="0";left=84;top=565;right=140;bottom=598;edge=1;z=12};
edit7={cls="edit";text="0";left=14;top=612;right=70;bottom=645;edge=1;z=13};
edit8={cls="edit";text="0";left=86;top=611;right=142;bottom=644;edge=1;z=8};
edit9={cls="edit";text="0";left=385;top=491;right=441;bottom=524;edge=1;z=15};
static={cls="static";text="Static";left=0;top=0;right=760;bottom=424;transparent=1;z=2}
)
/*}}*/
import console
console.open()
var ew = winform.static.createEmbed("EWDRAW.EWDrawCtrl.1")
var EWdraw1 = ew._object
winform.button.oncommand = function(id,event){
EWdraw1.SetGridValue( 5, 5, 100, 100, 0)
EWdraw1.SetGridOn( true)
}
winform.button2.oncommand = function(id,event){
//EWdraw1.SetDisplayToolBar(true)
var a = com.SafeArrayV({0;0;0});
var b = com.SafeArrayV({5;5;0});
console.log( EWdraw1.Line(a,b) )
}
winform.button3.oncommand = function(id,event){
var a = com.SafeArrayV({0;0;0});
var b = com.SafeArrayV({0;0;1});
console.log( EWdraw1.Circle(a,20,b) )
}
winform.button4.oncommand = function(id,event){
p1 = com.SafeArrayV({winform.edit1.text;winform.edit2.text;0});
p2 = com.SafeArrayV({winform.edit3.text;winform.edit4.text;0});
p3 = com.SafeArrayV({winform.edit5.text;winform.edit6.text;0});
p4 = com.SafeArrayV({winform.edit7.text;winform.edit8.text;0});
EWdraw1.Line(p1,p2)
EWdraw1.Line(p2,p3)
EWdraw1.Line(p3,p4)
EWdraw1.Line(p4,p1)
}
jisuan = function(x,y,angle){
var xx = x*math.cos(math.rad(angle)) - y*math.sin(math.rad(angle));
var yy = x*math.sin(math.rad(angle)) + y*math.cos(math.rad(angle));
return com.SafeArrayV({xx; yy;0}),xx,yy;
}
winform.button6.oncommand = function(id,event){
d1,winform.edit9.text,winform.edit10.text = jisuan(winform.edit1.text,winform.edit2.text,winform.edit.text);
d2,winform.edit11.text,winform.edit12.text = jisuan(winform.edit3.text,winform.edit4.text,winform.edit.text);
d3,winform.edit13.text,winform.edit14.text = jisuan(winform.edit5.text,winform.edit6.text,winform.edit.text);
d4,winform.edit15.text,winform.edit16.text = jisuan(winform.edit7.text,winform.edit8.text,winform.edit.text);
}
winform.button5.oncommand = function(id,event){
EWdraw1.Line(d1,d2)
EWdraw1.Line(d2,d3)
EWdraw1.Line(d3,d4)
EWdraw1.Line(d4,d1)
}
winform.show();
win.loopMessage();登录后方可回帖
借鉴相关文章, https://blog.csdn.net/mzl87/article/details/104407393
已知P(X,Y) 如果旋转θ角度, 那么旋转后点为: P'(X',Y')
在aardio中表达式为:
下面是角度为90°时候图片
45°时候: