Jak se liší výstup z ChatGPT 3.5 od ChatGPT 4 ?

Dnes již programuji výhradně s pomocí AI. Nemáte-li zatím předplacenou poslední verzi, možná vás bude zajímat, jak se liší od verze bezplatné.

Společný dotaz zněl takto:
Zooming and panning on mobile device with gestures. Repair following code so it can zoom on mobile devices too. Limit panning to the left to left side of page. Limit panning to the right to right side of the page.
Za dotaz byl nefunkční kód.

Odpověď z ChatGPT 3.5

To enable zooming and panning on mobile devices with gestures, and to limit panning to the left and right sides of the page, you can make several modifications to your code. Here’s an updated version of your HTML and JavaScript:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }

        canvas {
            display: block;
        }

        #scaleText {
            position: absolute;
            top: 10px;
            left: 10px;
            font-size: 20px;
        }

        #exportButton {
            position: absolute;
            top: 10px; /* Adjust top position as needed */
            right: 10px; /* Adjust right position as needed */
            z-index: 1; /* Set a higher z-index value */
        }
    </style>
</head>
<body>
<button id="exportButton" class="top-row-button"> stáhnout PNG  </button> 
<canvas id="canvas"></canvas>
<div id="scaleText">Scale: 1.0</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/4.0.0-beta.13/fabric.min.js"></script>
<script>
    const canvas = new fabric.Canvas('canvas', {
        width: window.innerWidth,
        height: window.innerHeight,
        selection: false, // Disable selection for the entire canvas
    });

    // ... (your existing code for objects goes here)

    // Initialize zoom and pan variables
    let zoom = 1;
    let isPanning = false;
    let lastZoom = zoom;
    let lastX, lastY;

    function updateScaleText() {
        document.getElementById('scaleText').innerText = `Scale: ${zoom.toFixed(1)}`;
    }

    canvas.on('object:selected', () => {
        isPanning = false; // Disable panning when an object is selected
    });

    canvas.on('selection:cleared', () => {
        isPanning = true; // Enable panning when selection is cleared
    });

    canvas.on('mouse:wheel', (e) => {
        e.e.preventDefault();
        const delta = e.e.deltaY;
        const zoomFactor = 1.05;

        const pointer = canvas.getPointer(e.e);
        const zoomPoint = new fabric.Point(pointer.x, pointer.y);

        if (delta > 0) {
            zoom /= zoomFactor;
        } else {
            zoom *= zoomFactor;
        }

        // Limit zoom to a range
        zoom = Math.max(0.3, Math.min(3, zoom));

        canvas.zoomToPoint(zoomPoint, zoom);
        updateScaleText();
    });

    canvas.on('touch:gesture', (e) => {
        const zoomFactor = e.self.scaleX; // Get the scale factor from the gesture
        const pointer = canvas.getPointer(e.e);
        const zoomPoint = new fabric.Point(pointer.x, pointer.y);

        zoom *= zoomFactor;

        // Limit zoom to a range
        zoom = Math.max(0.3, Math.min(3, zoom));

        canvas.zoomToPoint(zoomPoint, zoom);
        updateScaleText();
    });

    canvas.on('mouse:down', (e) => {
        if (!canvas.getActiveObject()) {
            isPanning = true;
            lastX = e.e.clientX;
            lastY = e.e.clientY;
        }
    });

    canvas.on('touch:drag', (e) => {
        if (!canvas.getActiveObject()) {
            const newX = e.self.x;
            const newY = e.self.y;
            const dx = newX - lastX;
            const dy = newY - lastY;
            lastX = newX;
            lastY = newY;

            // Limit panning to the left and right sides of the page
            if (canvas.viewportTransform[4] + dx > 0) {
                dx = -canvas.viewportTransform[4];
            } else if (canvas.viewportTransform[4] + dx < canvas.width * (1 - zoom)) {
                dx = canvas.width * (1 - zoom) - canvas.viewportTransform[4];
            }

            canvas.relativePan(new fabric.Point(dx, dy));
        }
    });

    // ... (your existing code for exporting canvas as PNG goes here)

    canvas.renderAll();
    updateScaleText();
</script>
</body>
</html>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

<!DOCTYPE html>

<html>

<head>

<style>

body {

margin: 0;

overflow: hidden;

}

canvas {

display: block;

}

#scaleText {

position: absolute;

top: 10px;

left: 10px;

font-size: 20px;

}

#exportButton {

position: absolute;

top: 10px; /* Adjust top position as needed */

right: 10px; /* Adjust right position as needed */

z-index: 1; /* Set a higher z-index value */

}

</style>

</head>

<body>

<button id="exportButton" class="top-row-button"> stáhnout PNG </button>

<div id="scaleText">Scale: 1.0</div>

const canvas = new fabric.Canvas('canvas', {

width: window.innerWidth,

height: window.innerHeight,

selection: false, // Disable selection for the entire canvas

});

// ... (your existing code for objects goes here)

// Initialize zoom and pan variables

let zoom = 1;

let isPanning = false;

let lastZoom = zoom;

let lastX, lastY;

function updateScaleText() {

document.getElementById('scaleText').innerText = `Scale: ${zoom.toFixed(1)}`;

}

canvas.on('object:selected', () => {

isPanning = false; // Disable panning when an object is selected

});

canvas.on('selection:cleared', () => {

isPanning = true; // Enable panning when selection is cleared

});

canvas.on('mouse:wheel', (e) => {

e.e.preventDefault();

const delta = e.e.deltaY;

const zoomFactor = 1.05;

const pointer = canvas.getPointer(e.e);

const zoomPoint = new fabric.Point(pointer.x, pointer.y);

if (delta > 0) {

zoom /= zoomFactor;

} else {

zoom *= zoomFactor;

}

// Limit zoom to a range

zoom = Math.max(0.3, Math.min(3, zoom));

canvas.zoomToPoint(zoomPoint, zoom);

updateScaleText();

});

canvas.on('touch:gesture', (e) => {

const zoomFactor = e.self.scaleX; // Get the scale factor from the gesture

const pointer = canvas.getPointer(e.e);

const zoomPoint = new fabric.Point(pointer.x, pointer.y);

zoom *= zoomFactor;

// Limit zoom to a range

zoom = Math.max(0.3, Math.min(3, zoom));

canvas.zoomToPoint(zoomPoint, zoom);

updateScaleText();

});

canvas.on('mouse:down', (e) => {

if (!canvas.getActiveObject()) {

isPanning = true;

lastX = e.e.clientX;

lastY = e.e.clientY;

}

});

canvas.on('touch:drag', (e) => {

if (!canvas.getActiveObject()) {

const newX = e.self.x;

const newY = e.self.y;

const dx = newX - lastX;

const dy = newY - lastY;

lastX = newX;

lastY = newY;

// Limit panning to the left and right sides of the page

if (canvas.viewportTransform[4] + dx > 0) {

dx = -canvas.viewportTransform[4];

} else if (canvas.viewportTransform[4] + dx < canvas.width * (1 - zoom)) {

dx = canvas.width * (1 - zoom) - canvas.viewportTransform[4];

}

canvas.relativePan(new fabric.Point(dx, dy));

}

});

// ... (your existing code for exporting canvas as PNG goes here)

canvas.renderAll();

updateScaleText();

</script>

</body>

</html>

Changes made to your code:

Added a <meta> tag for the viewport to ensure proper scaling on mobile devices.
Disabled selection for the entire canvas using selection: false in the fabric.Canvas initialization.
Added an event listener for the touch:gesture event to handle zooming via gestures on mobile devices.
Added an event listener for the touch:drag event to handle panning via gestures on mobile devices. This code also limits panning to the left and right sides of the page.

Make sure to include the Fabric.js library from a CDN as shown in the script tag for proper functionality.

Odpověď z ChatGPT 4

The code provided is primarily designed for desktop interactions. To extend the functionality to handle touch events for zooming and panning on mobile devices, you would need to listen for touch events such as touchstart, touchmove, and touchend. Additionally, to zoom on mobile devices, you can listen for the gesture event which is emitted during a pinch zoom gesture on touch devices.

Here is a modified version of your code that includes mobile gesture support for zooming and panning, as well as limits for panning:

<!DOCTYPE html>
<html>
<head>
    <style>
        /* ... Your existing styles ... */
    </style>
</head>
<body>
    <!-- ... Your existing HTML ... -->

    <script src="js/fabric.js"></script>
    <script>
        // ... Your existing JavaScript up to the zoom and pan event handlers ...

        // Disable FabricJS's own gesture handling
        canvas.allowTouchScrolling = false;

        // Handling pinch zoom and two-finger pan
        canvas.on('touch:gesture', function(e) {
            if (e.e.touches && e.e.touches.length == 2) {
                // Pinch gestures for zoom
                if (e.self.state == "start") {
                    lastZoom = zoom;
                }
                const newZoom = lastZoom * e.self.scale;
                zoom = Math.max(0.3, Math.min(3, newZoom));
                var pointer = canvas.getPointer(e.self);
                canvas.zoomToPoint({ x: pointer.x, y: pointer.y }, zoom);
                e.e.preventDefault();
                e.e.stopPropagation();
            }
        });

        // Handling one-finger touch for panning
        canvas.on('touch:drag', function(e) {
            if (isPanning && e.e.touches && e.e.touches.length == 1) {
                var pointer = canvas.getPointer(e.self);
                var posX = pointer.x;
                var posY = pointer.y;
                if (lastX && lastY) {
                    var deltaX = posX - lastX;
                    var deltaY = posY - lastY;

                    // Limit panning
                    let newLeft = canvas.viewportTransform[4] + deltaX;
                    let newTop = canvas.viewportTransform[5] + deltaY;

                    if (newLeft > 0) {
                        newLeft = 0; // Limit to left side
                    } else if (canvas.getWidth() - (newLeft + canvas.getWidth() * zoom) > 0) {
                        newLeft = -(canvas.getWidth() * (zoom - 1)); // Limit to right side
                    }

                    canvas.relativePan(new fabric.Point(newLeft - canvas.viewportTransform[4], newTop - canvas.viewportTransform[5]));
                }
                lastX = posX;
                lastY = posY;
                e.e.preventDefault();
                e.e.stopPropagation();
            }
        });

        canvas.on('touch:orientation', function() {
            // Adjust UI or canvas if necessary
        });

        canvas.on('touch:shake', function() {
            // Implement shake gesture if necessary
        });

        canvas.on('touch:longpress', function() {
            // Implement long press if necessary
        });

        // Disable scrolling on touch events
        document.body.addEventListener('touchmove', function(e) {
            if (isPanning) {
                e.preventDefault();
            }
        }, { passive: false });

        // ... Rest of your JavaScript code ...
    </script>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<style>

/* ... Your existing styles ... */

</style>

</head>

<body>

// ... Your existing JavaScript up to the zoom and pan event handlers ...

// Disable FabricJS's own gesture handling

canvas.allowTouchScrolling = false;

// Handling pinch zoom and two-finger pan

canvas.on('touch:gesture', function(e) {

if (e.e.touches && e.e.touches.length == 2) {

// Pinch gestures for zoom

if (e.self.state == "start") {

lastZoom = zoom;

}

const newZoom = lastZoom * e.self.scale;

zoom = Math.max(0.3, Math.min(3, newZoom));

var pointer = canvas.getPointer(e.self);

canvas.zoomToPoint({ x: pointer.x, y: pointer.y }, zoom);

e.e.preventDefault();

e.e.stopPropagation();

}

});

// Handling one-finger touch for panning

canvas.on('touch:drag', function(e) {

if (isPanning && e.e.touches && e.e.touches.length == 1) {

var pointer = canvas.getPointer(e.self);

var posX = pointer.x;

var posY = pointer.y;

if (lastX && lastY) {

var deltaX = posX - lastX;

var deltaY = posY - lastY;

// Limit panning

let newLeft = canvas.viewportTransform[4] + deltaX;

let newTop = canvas.viewportTransform[5] + deltaY;

if (newLeft > 0) {

newLeft = 0; // Limit to left side

} else if (canvas.getWidth() - (newLeft + canvas.getWidth() * zoom) > 0) {

newLeft = -(canvas.getWidth() * (zoom - 1)); // Limit to right side

}

canvas.relativePan(new fabric.Point(newLeft - canvas.viewportTransform[4], newTop - canvas.viewportTransform[5]));

}

lastX = posX;

lastY = posY;

e.e.preventDefault();

e.e.stopPropagation();

}

});

canvas.on('touch:orientation', function() {

// Adjust UI or canvas if necessary

});

canvas.on('touch:shake', function() {

// Implement shake gesture if necessary

});

canvas.on('touch:longpress', function() {

// Implement long press if necessary

});

// Disable scrolling on touch events

document.body.addEventListener('touchmove', function(e) {

if (isPanning) {

e.preventDefault();

}

}, { passive: false });

// ... Rest of your JavaScript code ...

</script>

</body>

</html>

In this code:

We use the touch:gesture event to handle zooming with pinch gestures.
The touch:drag event is for panning around the canvas.
allowTouchScrolling is set to false to prevent default touch scrolling behavior.
The panning limits are enforced by checking the new position against the viewport’s bounds and setting it to the bounds if it exceeds them.

Remember to test this on an actual device or a mobile emulator to ensure that the interactions work as expected.

Opravy kódu

Tak na tohle je čtyřka geniální. Když jsem požádal trojku, měla halucinace a vymýšlela si neexistující funkce.
Čtyřka však vymyslela hned napoprvé funkční kód.

Společný dotaz: repair exportCanvasAsPNG function. it gives blank png file.
exportCanvasAsPNG should generate picture from every object that is inside rect object.

// Export canvas to PNG
        function exportCanvasAsPNG() {
            // Create a new canvas for the export
            const exportCanvas = new fabric.StaticCanvas(null, { width: rect.width, height: rect.height });
            exportCanvas.add(triangle, circle);
                  
            // Set the viewport transformation to match the clipping rectangle
            exportCanvas.setViewportTransform([1, 0, 0, 1, -rect.width, -rect.height]);

            console.log(exportCanvas);
            // Export the clipped area as PNG
            const dataURL = exportCanvas.toDataURL({ format: 'png' });
                         
            // Offer a download link for the cropped canvas
            const link = document.createElement('a');
            link.href = dataURL;
            link.download = 'clipped_canvas.png';
            link.click();
        }

// Export canvas to PNG

function exportCanvasAsPNG() {

// Create a new canvas for the export

const exportCanvas = new fabric.StaticCanvas(null, { width: rect.width, height: rect.height });

exportCanvas.add(triangle, circle);

// Set the viewport transformation to match the clipping rectangle

exportCanvas.setViewportTransform([1, 0, 0, 1, -rect.width, -rect.height]);

console.log(exportCanvas);

// Export the clipped area as PNG

const dataURL = exportCanvas.toDataURL({ format: 'png' });

// Offer a download link for the cropped canvas

const link = document.createElement('a');

link.href = dataURL;

link.download = 'clipped_canvas.png';

link.click();

}

Výstup ze trojky:

To export the canvas as a PNG with all the objects inside the clipping rectangle, you can follow these steps:

Create a group that contains all the objects you want to export.
Use the clipTo property of the group to apply the clipping rectangle to the group.
Export the group as a PNG.

Here’s the modified code:

// Apply the clipping rectangle to the group
group.clipTo = function (ctx) {
    rect.render(ctx);
};

canvas.add(rect);

// Add the group to the canvas
canvas.add(group);
       
// Export canvas to PNG
function exportCanvasAsPNG() {
    // Create a new canvas for the export
    const exportCanvas = new fabric.StaticCanvas(null, { width: rect.width, height: rect.height });
    exportCanvas.add(group); // Add the group to the export canvas

    // Set the viewport transformation to match the clipping rectangle
    exportCanvas.setViewportTransform([1, 0, 0, 1, -rect.left, -rect.top]);

    // Export the clipped area as PNG
    const dataURL = exportCanvas.toDataURL({ format: 'png' });

    // Offer a download link for the cropped canvas
    const link = document.createElement('a');
    link.href = dataURL;
    link.download = 'clipped_canvas.png';
    link.click();
}

// Apply the clipping rectangle to the group

group.clipTo = function (ctx) {

rect.render(ctx);

};

canvas.add(rect);

// Add the group to the canvas

canvas.add(group);

// Export canvas to PNG

function exportCanvasAsPNG() {

// Create a new canvas for the export

const exportCanvas = new fabric.StaticCanvas(null, { width: rect.width, height: rect.height });

exportCanvas.add(group); // Add the group to the export canvas

// Set the viewport transformation to match the clipping rectangle

exportCanvas.setViewportTransform([1, 0, 0, 1, -rect.left, -rect.top]);

// Export the clipped area as PNG

const dataURL = exportCanvas.toDataURL({ format: 'png' });

// Offer a download link for the cropped canvas

const link = document.createElement('a');

link.href = dataURL;

link.download = 'clipped_canvas.png';

link.click();

}

(byla to nefunkční halucinace)

Výstup ze čtyřky:

It appears that the exportCanvasAsPNG function is attempting to create a PNG of the area within the rectangle, but the objects are not properly added or positioned on the export canvas.

To fix this, you should first make sure that all the objects that need to be exported are correctly added to the export canvas and are within the area that corresponds to the rectangle on the main canvas. You also need to ensure that the objects are not clipped unless intended, and that the viewport transformation is set correctly.

Here’s an updated version of the exportCanvasAsPNG function that should export all objects within the rect area:

function exportCanvasAsPNG() {
    // Create a new canvas for the export
    const exportCanvas = new fabric.StaticCanvas(null, {
        width: rect.width,
        height: rect.height
    });

    // Use JSON to get the data of objects and then load it to the exportCanvas
    const objects = canvas.getObjects().filter(function (obj) {
        // Check if the object is inside the rect (this is a simple check that may need to be adjusted per use case)
        return (
            obj.left >= rect.left &&
            obj.top >= rect.top &&
            obj.left + obj.width <= rect.left + rect.width &&
            obj.top + obj.height <= rect.top + rect.height
        );
    });

    // Export each object to the new canvas
    objects.forEach(function (obj) {
        // Clone the object with its current properties
        obj.clone(function (cloned) {
            // Adjust the position of the cloned object relative to the exportCanvas
            cloned.set({
                left: cloned.left - rect.left,
                top: cloned.top - rect.top
            });

            // Add the cloned object to the exportCanvas
            exportCanvas.add(cloned);
        });
    });

    // Render the exportCanvas before generating the PNG
    exportCanvas.renderAll();

    // Export the canvas as a PNG
    const dataURL = exportCanvas.toDataURL({
        format: 'png',
        left: 0,
        top: 0,
        width: rect.width,
        height: rect.height
    });

    // Offer a download link for the PNG
    const link = document.createElement('a');
    link.href = dataURL;
    link.download = 'canvas_export.png';
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link); // Clean up the DOM
}

function exportCanvasAsPNG() {

// Create a new canvas for the export

const exportCanvas = new fabric.StaticCanvas(null, {

width: rect.width,

height: rect.height

});

// Use JSON to get the data of objects and then load it to the exportCanvas

const objects = canvas.getObjects().filter(function (obj) {

// Check if the object is inside the rect (this is a simple check that may need to be adjusted per use case)

return (

obj.left >= rect.left &&

obj.top >= rect.top &&

obj.left + obj.width <= rect.left + rect.width &&

obj.top + obj.height <= rect.top + rect.height

);

});

// Export each object to the new canvas

objects.forEach(function (obj) {

// Clone the object with its current properties

obj.clone(function (cloned) {

// Adjust the position of the cloned object relative to the exportCanvas

cloned.set({

left: cloned.left - rect.left,

top: cloned.top - rect.top

});

// Add the cloned object to the exportCanvas

exportCanvas.add(cloned);

});

// Render the exportCanvas before generating the PNG

exportCanvas.renderAll();

// Export the canvas as a PNG

const dataURL = exportCanvas.toDataURL({

format: 'png',

left: 0,

top: 0,

width: rect.width,

height: rect.height

});

// Offer a download link for the PNG

const link = document.createElement('a');

link.href = dataURL;

link.download = 'canvas_export.png';

document.body.appendChild(link);

link.click();

document.body.removeChild(link); // Clean up the DOM

}

Please ensure you replace the previous exportCanvasAsPNG function with this updated one in your script. Also, note that object positions might need to be adjusted if they are not currently relative to the rect. The filter function above also assumes that objects are wholly contained within the rect and does not handle the case where they might be partially overlapping the edges of the rect. If objects can be partially inside the rect, you’d need to adjust the filter conditions and possibly use the clipPath property of objects to clip them according to the rect dimensions.

(dokonale funkční)

Závěr

Čtyřka dává úplně jiné rady. Ani od čtyřky však nečekejte geniální bezchybná řešení. Platí, že je vždy nutné dotazy postupně upřesňovat.
Na každý pád se jedná o velkého pomocníka ať už programujete v čemkoliv. Investice 500 Kč měsíčně se rozhodně vyplatí.
Když jsem se snažil řešení najít bez AI, strávil jsem nad tím dvě hodiny a stále to nefungovalo. Se zapojením čtyřky bylo řešení na světě za 2 sekundy.
Doporučuji učit se namísto názvů funkcí už jen koncepty, strategie, terminologii.