矩形平移旋转的仿射变换

By admin at 2020-03-24 • 0人收藏 • 254人看过

考虑用echarts弄个简易的演示画板,里面对一个给定的矩形进行平移旋转

这种旋转平移矩阵应该怎么去计算呢?


先记录一下, 弄通的时候来更新下.哈

image.png

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
2020-04-07   #1

借鉴相关文章, https://blog.csdn.net/mzl87/article/details/104407393

已知P(X,Y) 如果旋转θ角度, 那么旋转后点为: P'(X',Y')

X' = X × cos(θ) - Y × sin(θ)
Y' = X × sin(θ) + Y × cos(θ)

在aardio中表达式为:

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));

下面是角度为90°时候图片

image.png

45°时候:

image.png

2020-04-08   #2

从上面二楼的echarts旋转结果来看,貌似上面公式有问题, 于是今天用EWDraw控件来画出来判断是不是百度图表绘制变形导致。

结果显示: 公式完全正确,百度图表缩放导致

image.png

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();


登录后方可回帖

登 录
信息栏
本站永久域名:HtmLayout.Cn
纯私人站,当笔记本用的,学到哪写到哪,目前正在学aardio+halcon机器视觉.
Sciter中文在线文档Sciter在线学习文档
本 站 主 站:Stm32cube中文网
Aardio 官方站:Aardio官方
Aardio最新功能:Aardio官方更新日志
aardio在线手册Aardio在线手册
C大Aardio论坛:Aar爱好者论坛
简码教程网:简码编程
AARDIO语言QQ群:70517368
赞助商:才仁机械
下载站:非凡软件站
Loading...