In version 9.3.8 of Konva, when mirroring an image along the X axis and then connecting it to a transformer, the rotation anchor is positioned at the bottom instead

I have been working with Konva for several weeks now and encountering a specific issue. When attempting to mirror an image, setting scaleX works correctly, mirroring it on the vertical axis.

However, I am facing another issue (possibly a bug or misunderstanding) when trying to attach a transformer to the node. The transformer is created after the image, which already has the flipping effect applied. This results in the rotation anchor being positioned below the image instead of the usual top position.

Is there a way to work around this issue?

Below are snippets of my code related to the transformer:

const transformer = new Konva.Transformer({
    nodes: [image],
    flipEnabled: false,
    rotateEnabled: true,
    enabledAnchors: ["top-left", "top-right", "bottom-left", "bottom-right", "top-center", "middle-left", "middle-right", "bottom-center"],
});
typescriptvue.jskonvajs

Answer №1

Encountering this issue is a consequence of negative scaling and decomposition of transform matrices. To overcome this, you can utilize the 

// Disable single node rotation
transformer.useSingleNodeRotation(false);
// Add a shape to transformer
transformer.nodes([shape]);
transformer.rotation(45);
transformer.update();

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Dagre-d3 zoom problem arises in Vue.js 2 when used in watch mode

Utilizing d3-dagre for data rendering has been successful initially. However, I encounter an error when attempting to update the view in watch mode. Although the data updates successfully, an error related to the "g" attribute transformation is thrown in t ...

d3.jsvue.jsvuejs2dagre-d3dagre

Vue no longer updates when the selected option is changed

Currently, I am working on an app for a class project and have encountered a problem involving fetching the value of a user-selected option instead of the default one. Below is the select element I am utilizing: <select v-model="selectedType" ...

vue.js

What is the best method to add data to a child array located within a nested array?

Struggling to create an array that will display data in the following format: Healthcare -- Insights driven by data for improved healthcare -- Urban Analytics Transport -- Urban Analytics Cities -- Urban Analytics I have attempted ...

javascriptarraystypescriptpure-js

Modify the selection in one dropdown menu based on the selection in another dropdown menu using Angular 8

When I have two dropdowns, I aim to update the second dropdown with a matching JSON object based on the value selected in the first dropdown. JSON this.dropdownValues = { "mysql 8": { "flavor": [ "medium", ...

angulartypescriptdropdown

Encountering an issue while attempting to input a URL into the Iframe Src in Angular 2

When I click to dynamically add a URL into an iframe src, I encounter the following error message: Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'SafeValue%20must%20use%20%5Bproperty%5D' To ensure the safety of the ...

javascriptjqueryangulartypescriptiframe

Displaying all notifications while using parameters in TypeScript

I am trying to display all of my notifications in HTML. The value is returned in res = response.json();, but my website only shows one notification, similar to the example in https://i.sstatic.net/ECbyx.png Let's start with this code: public event ...

angulartypescript

Encountering an issue while invoking the helper function in Vuejs

Main view: <script> import { testMethod1 } from "../helper"; export default { methods: { init(){ console.log("Res:", testMethod1()); } } } </script> Helper: import DataService from "../services/data. ...

javascriptfunctionvue.jshelper

Passing and Retrieving Specific Item from Mapped Array in React/Mobx: A guide on sending a single item from a mapped array to another component and accessing only

My API data is stored in a store called PositionStore, which includes information such as loading status, error messages, and an array of items. Here's how it looks: const PositionStore = observable({ loading: false, error: "", items: [] as ...

javascriptreactjstypescriptreact-routermobx

How can you prevent specific dates from being selected in an Angular Datepicker?

Is there a way to exclude Monday from the "mat-datepicker" component? I've tried implementing the following code in my class component: dateFilter = (_date: any) =>{ let day = _date.getDay(); console.log(day); return day != 1; ...

javascriptangulartypescriptangular-material

How to Utilize Vuex Module in a JavaScript File

I am currently utilizing the Quasar framework with Vue3 and have imported a module into my Vuex Store. It functions properly when utilized in a Vue file, but how can I access it from a JS file? I am able to log the states in the settings module, however th ...

vue.jsvuexvuejs3quasar-framework

Encountering a 404 error when attempting to make an Axios post request

Utilizing Axios for fetching data from my backend endpoint has been resulting in a 404 error. Oddly enough, when I manually enter the URI provided in the error message into the browser, it connects successfully and returns an empty object as expected. Her ...

javascriptnode.jsexpressvue.jsaxios

When using the beforeEach function in Vue router, the parameters 'to' and 'from' are not being called. ESlint is flagging a warning saying that 'to' is defined but never used

Encountered an issue while implementing the Vue Router beforeEach function. router.beforeEach((to, from, next) => { NPgrogress.start(); next(); }); I am only interested in the third argument within beforeEach, yet ESlint is flagging errors: 145:1 ...

vue.jsvue-routereslint

Showing Django templates within a VueJS template

My Django index page includes the following code: {% load render_bundle from webpack_loader %} <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax ...

djangovue.jsvuetify.js

How can I effectively link data to an Angular Material dropdown in Angular 5?

Essentially, I am updating a user profile with user information that needs to be bound to the corresponding fields. this.editOfferprice= new FormGroup({ xyz : new FormControl(xxxx,[]), xxx: new FormControl(xxxx,[Validators.required]), ...

angulartypescriptangular5dropdown

The NGRX state spread operator requires the Type to include a '[Symbol.iterator]()' function

Utilizing NGRX Entity adapter for state initialization has been encountering an issue, specifically with the getInitialState method. export const initialState = adapter.getInitialState({ eventsError: null, eventsLoading: false }); ex ...

angulartypescriptngrx

Why is the Last Page display on pagination showing as 3 instead of 2 per items?

When working on Angular 13, I encountered an issue with applying pagination numbers like 1, 2, 3, etc. The problem I faced was that the last page Number should be 2, but it is displaying as 3. Why is this happening? To investigate the issue, I tested my ...

typescriptangular-cliangular-pipeangular13angular-pagination

Unexpected ngStyle behavior: failing to update when property changes occur

I'm feeling a little puzzled about why the ngStyle directive is not behaving as anticipated. I came across this issue while following a tutorial by Brad Traversy on Udemy, where we were instructed to utilize ngStyle in the following manner: <h3 [n ...

angulartypescriptng-style

Vite 3: Including a global variable in the configuration results in an additional line break at the end of the string

Vite 3 offers the capability to define environment variables that will replace the key with the corresponding value during project build. The section of the configuration where the version is defined appears as follows: define: { __RELEASE_VERSION__: JS ...

vue.jsvite

Steps to delete vue-snotify notifications after unintentionally clicking the back button on the browser

When you open a persistent notification like a snotify confirm notification or others that do not close automatically, and then accidentally click the browser's back button, the notification remains open. Are there any proposed solutions for this iss ...

vue.jsnotificationsvue-routerback-button

Tips for leveraging TypeScript's indexed access types when working with nullable nested types

Looking to create a TypeScript type based on another type. This method is successful: type Result = { data: { nestedData: { foo: string; bar: string } } }; type NestedData = Result['data']['nestedData']; However, when the data proper ...

typescriptnullability