最后采用的方案是
1.移动时记录变换原点位置
2.根据scale的比例计算出左上角相对原点的位置
3.根据原点位置与左上角的相对位置,算出左上角的位置
没有足够的数据
穷凶极恶丶带恶人 回答了问题 · 2020-09-11
最后采用的方案是
1.移动时记录变换原点位置
2.根据scale的比例计算出左上角相对原点的位置
3.根据原点位置与左上角的相对位置,算出左上角的位置
最后采用的方案是1.移动时记录变换原点位置2.根据scale的比例计算出左上角相对原点的位置3.根据原点位置与左上角的相对位置,算出左上角的位置
关注 3 回答 3
穷凶极恶丶带恶人 提出了问题 · 2020-09-11
我现在有张图片是可以拖拽移动和放大缩小的,在图片左上角有一段说明是动态显示信息的,必须且仅显示在图片的左上角。
<img
:data-original="src"
:width="picW"
:height="picH"
:style="{ transform: picTransform, top: picTop ,left:picLeft }"
@mousedown.prevent="mousedown($event)"
@mousemove.prevent="mousemove($event)"
@mouseup.prevent="mouseup($event)"
@mousewheel.prevent="mousewheel($event)"
@load="onload"
>
<span
:style="{ top: picTop ,left:picLeft,position:'absolute' }">
{{ info }}
</span>
当图片放大缩小后,在页面效果中,其位置是有变化的,但是left和top值没变,那么图片放大缩小时,我该如何调整 span
位置
我现在有张图片是可以拖拽移动和放大缩小的,在图片左上角有一段说明是动态显示信息的,必须且仅显示在图片的左上角。 {代码...} 当图片放大缩小后,在页面效果中,其位置是有变化的,但是left和top值没变,那么图片放大缩小时,我该如何调整 span位置
关注 3 回答 3
穷凶极恶丶带恶人 回答了问题 · 2020-09-09
git上搜一下,很多现成的方案
git上搜一下,很多现成的方案[链接]
关注 6 回答 4
穷凶极恶丶带恶人 回答了问题 · 2020-09-08
搞那么复杂干嘛,换成这样写不好吗
this.Num.forEach(item=>{
if (!this.Group.some(key => key.id === item.id)) {
this.Group.push(item)
}
})
搞那么复杂干嘛,换成这样写不好吗 {代码...}
关注 3 回答 1
穷凶极恶丶带恶人 赞了回答 · 2020-09-08
学过 Java / C# / Golang 一类的 OOP 强类型语言吗?
这就是基本的静态方法和类方法的区别。
P.S. C# 3.0 后增加了可以在实例里访问静态方法的特性,但本质是个语法糖。
学过 Java / C# / Golang 一类的 OOP 强类型语言吗?这就是基本的静态方法和类方法的区别。P.S. C# 3.0 后增加了可以在实例里访问静态方法的特性,但本质是个语法糖。
关注 1 回答 2
穷凶极恶丶带恶人 回答了问题 · 2020-09-08
可能是webpack
没有配置babel
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: "babel-loader"
}
]
}
可能是webpack 没有配置babel {代码...}
关注 4 回答 2
穷凶极恶丶带恶人 回答了问题 · 2020-09-03
你是要画地图还是只要显示平面图中员工的相对位置就可以了
你是要画地图还是只要显示平面图中员工的相对位置就可以了
关注 5 回答 4
穷凶极恶丶带恶人 关注了问题 · 2020-09-03
最近公司有准备做和物联网相关的项目,比如有厂房的平面图,员工会佩戴感应设备,一直上报位置信息,想知道在前端呈现方面一般会用到什么技术,看到网上一般讲 three.jswebgelesmap,现在对这块没有概念,各位大佬能否给指点一下,比如学习的话我应该如何起步?
关注 5 回答 4
穷凶极恶丶带恶人 发布了文章 · 2020-09-03
为了解决简单的CURD动作,减少Ctrl+c
和 Ctrl+v
动作,生成基础操作。一开始本打算写一个插件,后来发现不是很好扩展,且耦合性太强,各种个性化的需求太多,而Vue的继承并非很完善,尤其是Template
的继承,干脆就采用生成代码的插件,简单暴力。
基于此目的,刚好学习一下webpack plugin
开发。
class CurdVueElementPlugin implements CurdVueElementPluginInterface {
PluginParam: PluginParamInterface
constructor(PluginParam: PluginParamInterface) {
this.PluginParam = this.getOption(PluginParam)
}
apply(compiler: any) {
compiler.plugin('environment', () => {
this.execute()
});
}
getOption(param: PluginParamInterface) {
return Util.assign(DefaultPluginParam, param)
}
execute() {
for (let opt of this.PluginParam.options) {
let curdObj = new TemplateExecute(opt, this.PluginParam.baseDir)
curdObj.execute()
}
}
}
class TemplateExecute {
constructor(param: OptionInterface) {
//……
}
getOption(param: OptionInterface) {
//……
}
writeService(/*path*/,/*content*/) {
return serviceTemplate.getTemplate().then((res: any) => {
return Util.writeTemplate(/*path*/,/*content*/)
})
}
writeView(/*path*/,/*content*/) {
return Util.writeTemplate(/*path*/,/*content*/)
}
execute() {
this.writeService(/*path*/,/*serviceTemplate*/).then( () => {
this.writeView(/*path*/,/*viewTemplate*/);
});
}
}
然后搞定!
npm install curd-vue-element-plugin -D
webpack配置文件中
const CurdVueElementPlugin = require('curd-vue-element-plugin')
module.exports = {
plugins: [
new CurdVueElementPlugin({
//……options
})
]
}
Vue-Cli配置文件中
/* vue.config.js */
const CurdVueElementPlugin = require('curd-vue-element-plugin')
module.exports = {
configureWebpack: {
plugins: [
new CurdVueElementPlugin({
//……options
})
]
}
}
{
// `baseDir` 是要创建的文件根目录,默认为'./src'
baseDir: './src',
// `options` 是要创建的增删改查实例配置组成的数组
options: [{
// `name` 是当前实例的名称,必填,其值对应最终生成的文件名
name: 'project',
// `serviceDir` 是请求代码生成目录,默认为'/services',
serviceDir:'/services',
// `componentDir` 是template代码生成目录,默认值是'/views'
componentDir: '/views',
// `service` 是要生成的增删改查功能配置数组,默认为['list']
// 值只能为list,add,update,del 其他均不可识别。
// 可阅读源码,在 `/lib/ServiceTemplate`中加入自定义的请求模板
// 数组值可为字符串,也可为对象(如下所示):
/* {
// `func` 值与上述数组中值对应
func:'list',
// `url` 值为http请求地址
url:'……'
} */
service: ['list', 'add', 'update', 'del'],
// `component` 是定义实例对应的数据model等相关配置
component: {
// `primaryKey` 是数据主键,删除、修改需要识别此值,默认为 'id'
primaryKey: 'id',
// `model` 是数据模板,必填
model: [{
//`name` 是该项数据对应前后端交互时对应的数据项标识
name: 'name',
//`text` 是该项数据前端显示的名称
text: '姓名',
//`isSearch` 标识是否为查询条件,默认为 false
isSearch: true,
//`isEdit` 标识是否为编辑/新增列,默认为 true
isEdit: true
}, {
name: 'sex',
text: '性别'
}, {
name: 'telephone',
text: '手机号码',
isSearch: true
}, {
name: 'email',
text: '邮箱'
}, {
name: 'address',
text: '地址',
isEdit: false
}]
}
}]
}
Clone Demo 使用
项目源代码在这里:curd-vue-element-plugin
为了解决简单的CURD动作,减少Ctrl+c和 Ctrl+v动作,生成基础操作。一开始本打算写一个插件,后来发现不是很好扩展,且耦合性太强,各种个性化的需求太多,而Vue的继承并非很完善,尤其是Template的继承,干脆就采用生成代码的插件,简单暴力。基于此目的,刚好学习...
赞 1 收藏 0 评论 2
查看全部 个人动态 →
(゚∀゚ )
暂时没有
注册于 2020-06-04
个人主页被 764 人浏览
推荐关注