You can adjust styles of Konva.Transformer for your web app. You can change stroke, size and fill of all anchors. Also you can change stroke color and size of border.
Konva Shape transform and selection styling Demoview raw
<!DOCTYPE html> <html> <head> <!-- USE DEVELOPMENT VERSION --> <scriptsrc="https://unpkg.com/[email protected]/konva.min.js"></script> <metacharset="utf-8" /> <title>Konva Select and Transform Styling Demo</title> <style> body { margin: 0; padding: 0; overflow: hidden; background-color: #f0f0f0; } </style> </head>
<body> <divid="container"></div> <script> var width = window.innerWidth; var height = window.innerHeight;
var stage = new Konva.Stage({ container: 'container', width: width, height: height, });
var layer = new Konva.Layer(); stage.add(layer);
var circle = new Konva.Circle({ x: 150, y: 150, radius: 70, fill: 'red', draggable: true, }); layer.add(circle);
// create new transformer var tr = new Konva.Transformer({ anchorStroke: 'red', anchorFill: 'yellow', anchorSize: 20, borderStroke: 'green', borderDash: [3, 3], nodes: [circle], }); layer.add(tr); </script> </body> </html>
Enjoying Konva? Please consider to
support the project.