-
-
Notifications
You must be signed in to change notification settings - Fork 17
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
New center and zoom options #89
Comments
I am going to work on an algorithm that serves to pan and zoom with the mouse to integrate it if these recommendations are approved |
Hi @raminious , the use case of the centerAndFitShape function is quite trivial to make things uncenterable if they go off-canvas, you can see how it works in detail here... https://codepen.io/JEE42/pen/ExEgeMX Do this exercise, move one of the red squares out of your vision and click on Fit rect group to stage |
@gniuslab Is there any progress on the zooming feature? |
@raminious Yes, I can implement it, but I don't know the process of how to do it, in your main branch... |
think you ,You guys are the best. |
@raminious This only solves the scaling problem, but does not solve the box selection x y offset problem.Sorry, my English is not good |
This is my code `stage.on('wheel', (e) => {
});` |
@ProjetNice Use |
I solved that problem, and this is my demo, using the vue framework <template>
<button @click="addPolygon">addPolygon</button>
<button @click="changeDrag">changeDrag</button>
<div id="editor" ref="root"></div>
</template>
<script setup>
import {ref, onMounted} from "vue";
import {Pikaso} from "pikaso";
let editor;
let stage;
let layer
let board
let selection
const root = ref(null);
let dragFlag=false
onMounted(() => {
editor = new Pikaso({
container: root.value,
selection: {
transformer: {
borderStroke: "#1890ff",
borderStrokeWidth: 0.5,
anchorFill: "#1890ff",
anchorSize: 10,
},
zone:{
fill:"#1890ff50",
stroke:'#1890ff',
}
},
});
editor.board.background.fill('rgba(0,0,0,0.5)')
stage=editor.board.stage
layer=editor.board.layer
board=editor.board
selection=board.selection
/**
* Used to calibrate mouse position
*/
stage.on("mousemove touchmove",(e)=>{
let zoom=selection.zone
let x=zoom.attrs.x
let y=zoom.attrs.y
let width=zoom.attrs.width
let height=zoom.attrs.height
let sx=stage.x()
let sy=stage.y()
let scx=stage.scaleX()
let scy=stage.scaleY()
zoom.attrs.x = (x - sx) / scx;
zoom.attrs.y = (y - sy) / scy;
zoom.attrs.width=width/scx
zoom.attrs.height=height/scy
})
/**
* Resize the canvas
*/
stage.on('wheel', (e) => {
e.evt.preventDefault();
let oldScale = stage.scaleX();
let scaleBy=1.1
let mousePointTo = {
x: stage.getPointerPosition().x / oldScale - stage.x() / oldScale,
y: stage.getPointerPosition().y / oldScale - stage.y() / oldScale,
};
let newScale = e.evt.deltaY > 0 ? oldScale / scaleBy : oldScale * scaleBy ;
stage.scale({ x: newScale, y: newScale });
let newPos = {
x: -(mousePointTo.x - stage.getPointerPosition().x / newScale) * newScale,
y: -(mousePointTo.y - stage.getPointerPosition().y / newScale) * newScale,
};
stage.position(newPos);
stage.batchDraw();
});
})
function addPolygon() {
editor.shapes.polygon.insert({
x: 250,
y: 250,
radius: 90,
sides: 6,
fill: "#fafafa",
});
}
function changeDrag(){
stage.draggable(!dragFlag)
dragFlag=!dragFlag
}
</script>
<style>
#editor {
width: 100%;
height: 100vh;
background: #ccc;
}
</style>
|
Resume
I plan to change the way in which Pikaso creates the container, to give the possibility to center the image anything natively with an algorithm instead of using a css trick to center the background image to the stage, and additionally the function of zoomIn and zoomOut
Example of implementation to center any shape in stage for example in file
Background.ts:125
The text was updated successfully, but these errors were encountered: