Comments (3)
直接transform layer元素就行了吧
from spritejs.
我试一下,其实我是想实现一个画板的类似功能,需要放大,缩小,拖动元素,大概写了一些,感觉不太方便
layer上面有一个scale属性,可以放大缩小,但是放大或者缩小后的元素pos偏移的x,y有点对应不上,我按照放大的比例去做一个计算还是有些问题
下面是我简单写的一个实例
import * as spritejs from "spritejs";
const { Scene, Path, Group, SpriteSvg } = spritejs;
export function drawScene(container, options = {}) {
//获取容器的宽高
const { width, height } = container.getBoundingClientRect();
debugger;
const scene = new Scene({
container,
mode: "stickyTop",
width,
height,
...options,
});
const layer = scene.layer({
// handleEvent: false,
});
const background = new Group({
width,
height,
});
layer.append(background);
const eventStore = {
//当前按住的按键
keyCode: null,
//当前选中元素
parts: null,
scale: 1,
//鼠标按下的位置
offsetX: 0,
offsetY: 0,
mouseX: 0,
mouseY: 0,
moveEvt: null
};
layer.attr({
scale: [1, 1],
// bgcolor: "white",
borderWidth: 1,
});
function getViewport(val) {
return val*eventStore.scale
}
scene.addEventListener("mousedown", (evt) => {
const { target, x, y } = evt;
eventStore.mouseX = x;
eventStore.mouseY = y;
console.log(evt);
if (target.attributes.type == "path") {
eventStore.parts = evt.target;
}
});
// document.addEventListener("mouseup", (evt) => {
// })
document.addEventListener("mouseup", (evt) => {
const { mouseX, mouseY, keyCode, offsetX, offsetY, moveEvt} = eventStore;
const { x, y } = moveEvt || {};
console.log("====================");
//重置选中元素
eventStore.parts = null;
//记录画布偏移的位置
if ((mouseX || mouseY) && keyCode == 32) {
eventStore.offsetX =offsetX + x - mouseX;
eventStore.offsetY =offsetY + y - mouseY;
background.attr({
pos: [eventStore.offsetX, eventStore.offsetY],
});
}
eventStore.keyCode = null;
//重置鼠标的位置
eventStore.mouseX = 0;
eventStore.mouseY = 0;
});
scene.addEventListener("mousemove", (evt) => {
const { x, y } = evt;
const { mouseX, mouseY, offsetX, offsetY } = eventStore;
if (eventStore.keyCode == 32 && mouseX && mouseY) {
eventStore.moveEvt = evt;
background.attr({
// scale: [1, 1],
pos: [offsetX + x - mouseX, offsetY + y - mouseY],
// x: offsetX + x - mouseX,
// y: offsetY + y - mouseY
});
// scene.attr({
// scale: [1, 1],
// pos: [eventStore.offsetX, eventStore.offsetY]
// });
// layer.getOffsetPosition(offsetX + x - mouseX, offsetY + y - mouseY)
} else if (eventStore.parts) {
// evt.stopPropagation();
eventStore.parts.attr("pos", [x - offsetX, y - offsetY]);
}
});
document.addEventListener("keydown", (evt) => {
evt.preventDefault();
const { keyCode } = evt;
eventStore.keyCode = keyCode;
eventStore.parts = null
});
document.addEventListener("keyup", (evt) => {
evt.preventDefault();
eventStore.keyCode = null;
//重置鼠标的位置
eventStore.mouseX = 0;
eventStore.mouseY = 0;
});
document.addEventListener("wheel", (evt) => {
evt.preventDefault();
if (eventStore.keyCode == 32){
console.log(eventStore.scale, evt)
eventStore.scale += evt.deltaY * -0.001;
eventStore.offsetX = evt.deltaY * -0.001;
eventStore.offsetY = evt.deltaY * -0.001;
// Restrict scale
eventStore.scale = Math.min(Math.max(0.125, eventStore.scale), 4);
console.log(eventStore.scale)
background.attr({
scale: [eventStore.scale, eventStore.scale],
});
}
});
return {
layer: background,
scene,
};
}
from spritejs.
你先设置anchor属性或者transform-origin 属性,然后再缩放,transform-origin 就是缩放的原点,这个和css操作dom元素是一样的。
from spritejs.
Related Issues (20)
- 动画问题着急!!!!项目应用
- 小程序 canvas 2d 真机闪退
- 使用path或Polyline绘制路径,绘制的路径有问题 HOT 3
- 请问怎么给圆环添加圆角效果?
- 请问下:实例化多个 Path, 并且每个 Path 的 点位有几千个,通过 layer.append 批量添加,会导致卡顿,这种情况下要怎么处理呢? HOT 2
- Scene长度超出6000+,整个界面就会拉长没有按比例去绘制
- 想实现一个放烟花的效果,但是无从入手,求指点 HOT 1
- 模块“"spritejs"”没有导出的成员“ProtonRenderer” HOT 1
- SpriteSvg 在vue中传入一个本地svg文件加载不出来 HOT 2
- 未来有支持 webGPU的计划吗? HOT 1
- sprite.js label标签在win11上渲染异常 HOT 6
- 如何实现矩形框的拉大和缩小
- 请问如何实现限定范围绘制,超出部分隐藏 HOT 1
- 中文文档中例子链接访问时会不断重定向 HOT 2
- server render with typescript
- Gradient的vector 怎么用啊
- 文字换行的最佳实践是啥?What is the best practice for wrapping text? HOT 2
- 依赖的css-select版本过低存在漏洞风险
- 如何监听组件的生命周期以及支持哪些事件?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from spritejs.