矩形平移旋转的仿射变换

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

考虑用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();


登录后方可回帖

登 录
信息栏
 私人小站

本站域名

ChengXu.XYZ

投诉联系:  popdes@126.com



快速上位机开发学习,本站主要记录了学习过程中遇到的问题和解决办法及上位机代码分享

这里主要专注于学习交流和经验分享.
纯私人站,当笔记本用的,学到哪写到哪.
如果侵权,联系 Popdes@126.com

友情链接
Aardio官方
Aardio资源网


才仁机械


网站地图SiteMap

Loading...