DataType
/
omi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

omip-svg - fix transform

This commit is contained in:
dntzhang 2019-04-15 11:49:44 +08:00
parent 2c7ee9a225
commit 394e1e7ade
7 changed files with 74 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
packages/cax-svg-omip/src/components/cax-element/svg/parse-transform.js
View File

@ -6,8 +6,9 @@ function parse(a) {
const data = {}
const order = []
for (let i in (a = a.match(/(\w+\((\-?\d+\.?\d*e?\-?\d*,?)+\))+/g))) {
const c = a[i].match(/[\w\.\-]+/g)
let c = a[i].match(/[\w\.\-]+/g)
const key = c.shift()
c = c.map(item => Number(item))
order.push(key)
data[key] = c
}
@ -19,36 +20,40 @@ function parse(a) {
export function transform(props, target) {
if (!props) return
const args = []
args.push(mt['translate'].apply(null, [Number(props.x), Number(props.y)]))
if (props.transform) {
const obj = parse(props.transform)
const args = []
obj.order.forEach(prop => {
if (prop === 'rotate') {
obj.data[prop][0] *= Math.PI / 180
if (obj.data[prop].length > 1) {
target.originX = obj.data[prop][1] * -1
target.originY = obj.data[prop][2] * -1
}
//svg rotate 2、3个参数不影响 position，origin会影响position，所以注释
//if (obj.data[prop].length > 1) {
// target.originX = obj.data[prop][1] * -1
// target.originY = obj.data[prop][2] * -1
//}
}
args.push(mt[prop].apply(null, obj.data[prop]))
})
const mts = mt.compose.apply(null, args)
const t = {}
Matrix2D.decompose(mts.a, mts.b, mts.c, mts.d, mts.e, mts.f, t)
target.rotation = (t.rotation * 180) / Math.PI
target.x += parseFloat(t.x)
target.y += parseFloat(t.y)
target.scaleY = t.scaleY
target.scaleX = t.scaleX
target.skewX = t.skewX
target.skewY = t.skewY
}
target.originX = Number(props.x) * -1
target.originY = Number(props.y) * -1
const mts = mt.compose.apply(null, args)
const t = {}
Matrix2D.decompose(mts.a, mts.b, mts.c, mts.d, mts.e, mts.f, t)
target.rotation = (t.rotation * 180) / Math.PI
target.x = parseFloat(t.x) + target.originX
target.y = parseFloat(t.y) + target.originY
target.scaleY = t.scaleY
target.scaleX = t.scaleX
target.skewX = t.skewX
target.skewY = t.skewY
if (props.width && props.height) {
target.width = parseFloat(props.width)

7
packages/cax-svg-omip/src/components/cax-element/svg/rect.js
View File

@ -19,8 +19,11 @@ export function rect(props) {
Number(options.height),
parseStyle(props)
)
rect.x = Number(options.x)
rect.y = Number(options.y)
//移入transform里统一计算
//rect.x = Number(options.x)
//rect.y = Number(options.y)
transform(props, rect)
parseEvent(props, rect)

2
packages/cax-svg/app.wxss
View File

@ -5,6 +5,6 @@
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
padding: 10rpx 0;
box-sizing: border-box;
}

49
packages/cax-svg/cax/svg/parse-transform.js
View File

@ -6,8 +6,9 @@ function parse(a) {
const data = {}
const order = []
for (let i in (a = a.match(/(\w+\((\-?\d+\.?\d*e?\-?\d*,?)+\))+/g))) {
const c = a[i].match(/[\w\.\-]+/g)
let c = a[i].match(/[\w\.\-]+/g)
const key = c.shift()
c = c.map(item => Number(item))
order.push(key)
data[key] = c
}
@ -19,36 +20,40 @@ function parse(a) {
export function transform(props, target) {
if (!props) return
const args = []
args.push(mt['translate'].apply(null, [Number(props.x), Number(props.y)]))
if (props.transform) {
const obj = parse(props.transform)
const args = []
obj.order.forEach(prop => {
if (prop === 'rotate') {
obj.data[prop][0] *= Math.PI / 180
if (obj.data[prop].length > 1) {
target.originX = obj.data[prop][1] * -1
target.originY = obj.data[prop][2] * -1
}
//svg rotate 2、3个参数不影响 position，origin会影响position，所以注释
//if (obj.data[prop].length > 1) {
// target.originX = obj.data[prop][1] * -1
// target.originY = obj.data[prop][2] * -1
//}
}
args.push(mt[prop].apply(null, obj.data[prop]))
})
const mts = mt.compose.apply(null, args)
const t = {}
Matrix2D.decompose(mts.a, mts.b, mts.c, mts.d, mts.e, mts.f, t)
target.rotation = (t.rotation * 180) / Math.PI
target.x += parseFloat(t.x)
target.y += parseFloat(t.y)
target.scaleY = t.scaleY
target.scaleX = t.scaleX
target.skewX = t.skewX
target.skewY = t.skewY
}
target.originX = Number(props.x) * -1
target.originY = Number(props.y) * -1
const mts = mt.compose.apply(null, args)
const t = {}
Matrix2D.decompose(mts.a, mts.b, mts.c, mts.d, mts.e, mts.f, t)
target.rotation = (t.rotation * 180) / Math.PI
target.x = parseFloat(t.x) + target.originX
target.y = parseFloat(t.y) + target.originY
target.scaleY = t.scaleY
target.scaleX = t.scaleX
target.skewX = t.skewX
target.skewY = t.skewY
if (props.width && props.height) {
target.width = parseFloat(props.width)

7
packages/cax-svg/cax/svg/rect.js
View File

@ -19,8 +19,11 @@ export function rect(props) {
Number(options.height),
parseStyle(props)
)
rect.x = Number(options.x)
rect.y = Number(options.y)
//移入transform里统一计算
//rect.x = Number(options.x)
//rect.y = Number(options.y)
transform(props, rect)
parseEvent(props, rect)

8
packages/cax-svg/pages/transformation/index.js
View File

@ -26,6 +26,14 @@ renderSVG(html`
// svg.stage.update()
renderSVG(html`
<svg width="300" height="220">
<rect x="20" y="20" width="40" height="40" style="stroke: #3333cc; fill:none;"></rect>
<rect x="20" y="20" width="40" height="40" style="fill: #3333cc" transform="rotate(15)"></rect>
</svg>`, 'svg-c', this)
},
changePath: function (){

1
packages/cax-svg/pages/transformation/index.wxml
View File

@ -2,4 +2,5 @@
<view class="container">
<cax-element id="svg-a"></cax-element>
<cax-element id="svg-b"></cax-element>
<cax-element id="svg-c"></cax-element>
</view>